Select2 在第一次 select2 打开事件中打开另一个 select2

Posted

技术标签:

【中文标题】Select2 在第一次 select2 打开事件中打开另一个 select2【英文标题】:Select2 open another select2 on 1st select2 open event 【发布时间】:2021-12-28 03:53:37 【问题描述】:

$(".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"); 不工作

【问题讨论】:

【参考方案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");
);

【讨论】:

test() 也为我工作。我想在 $('.js-example-events').on("select2:open", function () 中添加 open test() 不是问题 $('select[class='js-example-events']').on("select2:open", function () $("#s1").select2("open "); // 在这里不工作 );你试试看。 还是不行。你能分享一下工作中的jsfiddle吗jsfiddle.net/nc9k2jsd 我确实改变了。我确实在 jsfiddle.net/nc9k2jsd rahul.m 上运行过

以上是关于Select2 在第一次 select2 打开事件中打开另一个 select2的主要内容,如果未能解决你的问题,请参考以下文章

select2 onchange 事件仅有效一次

“Keypress”事件无法正常工作,使用 jQuery 和 Select2

在 select2 clear 上禁用下拉打开

Select2多选下拉菜单导致窗口滚动

select2 和表单更改事件

清除 select2 而不触发更改事件