Intente establecer el valor múltiple seleccionado de la opción de selección. Pero error al intentar agregar otra opción
<select id="flag" class="flag" name="flag[]" multiple="multiple" class="form-control" style="width: 100%"> </select>JS
var data="["; for (var i=0;i<5;i++){ data+="{\"id\":\""+i+"\","; data+="\"text\":\""+i+"\"}"; if(i<4){ data+=","; } } data+="]"; data = JSON.parse(data); $('.flag').select2({ data:data }); $('#flag').val([1,2]); $('#flag').trigger('change');Intente configurarlo con el script anterior. El valor en el campo de entrada seleccionado se ejecuta correctamente como la imagen a continuación.
Pero como puede ver, los números 1 y 2 no están seleccionados en la opción desplegable. Entonces, cuando trato de hacer clic en la opción "3". Espero que muestre 1,2,3. Pero la salida es solo "3", "1" y "2" desaparecen.
¿Es así como se hace o me estoy perdiendo algo?
Actualmente usando select2 v4
Funciona correctamente, necesita verificar css de usted
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Changer</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> </head> <body> <select id="flag" class="flag" name="flag[]" multiple="multiple" class="form-control" style="width: 100%"> </select> <button id="test">trigger</button> <script> $(document).ready(function() { const data = [ { id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' } ]; $('#flag').select2({ data: data }); $("#test").click(function() { $('#flag').val([1, 2]).trigger('change'); }); }); </script> </body> </html>