Select2 打开另一个 select2 on 1st select2 open 事件

Question

$(".js-example-events").select2();

$('.js-example-events').on("select2:open", function () {
    $("#s1").select2("open");
});

function test(){
    $("#s1").select2("open");
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
                                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css"/>

<select class="js-example-events" style="width:300px;">
<option>Select One</option>
<option>Select1</option>
</select>

<select class="js-example-events" id="s1" style="width:300px;">
<option>Selects Two</option>
<option>Select1</option>
</select>

<button onclick="test()">
Test
</button>

我想一次打开2个select2

当我使用按钮点击事件时有效，但当我使用 select2 打开事件时无效

<select class="js-example-events" style="width:300px;">
    <option>Select One</option>
    <option>Select1</option>
</select>

<select class="js-example-events" id="s1" style="width:300px;">
    <option>Selects Two</option>
    <option>Select1</option>
</select>

<button onclick="test()">Test</button>

JS

$(".js-example-events").select2();

$('.js-example-events').on("select2:open", function () {
    $("#s1").select2("open");  // not working here
});

function test(){
    $("#s1").select2("open"); // but work here well
}

工作 JSFiddle

https://jsfiddle.net/gqo5cL6x/

select2("open"); 不工作

Answer 1

您可以使用两种情况：

情况 1：在 select2 之前没有运行，因为您在 select2 之前运行，它在 HTML 上发生变化。因此，您调用的函数不是运行。您使用以下代码：

$(".js-example-events").on("click", function () { 
   $("#s1").select2();
   $("#s1").select2("open");
   $(this).select2();
   $(this).select2("open");
});

情况 2：保留您的代码，您需要调用以下代码的事件：

$(".js-example-events").select2();

$("span[class='select2-selection select2-selection-- 
 single']").on("click", 
function () { 
   $("#s1").select2("open");
  $(this).select2("open");
});

Select2 打开另一个 select2 on 1st select2 open 事件

Select2 open another select2 on 1st select2 open event

javascript

html

jquery

jquery-select2