$(".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>Quiero abrir 2 select2 a la vez.
Funciona cuando uso un evento de clic de botón, pero no cuando uso el evento de apertura 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 de trabajo
https://jsfiddle.net/gqo5cL6x/
seleccionar2("abrir"); no está trabajando
Puedes usar dos casos:
Caso 1: no se ejecuta antes de select2 porque se ejecuta antes de select2, cambia en HTML. Por lo tanto, llama a la función no ejecutada. Usas el siguiente código:
$(".js-example-events").on("click", function () { $("#s1").select2(); $("#s1").select2("open"); $(this).select2(); $(this).select2("open"); });Caso 2: mantenga su código, necesita llamar al evento para codificar a continuación:
$(".js-example-events").select2(); $("span[class='select2-selection select2-selection-- single']").on("click", function () { $("#s1").select2("open"); $(this).select2("open"); });