Utilizo el módulo jQuery select2 para crear un cuadro de selección de opción múltiple. Hice esto en una versión anterior (3.4.5) y funcionó bien. Pero después de actualizar a 4.1.0, la preselección de una opción no funciona.
Mi código se ve a continuación,
HTML - parte:
<input type="text" id="accessories" />JS:
jQuery(document).ready(function() { var acceArray2 = [{id:0,text:"textA"},{id:1,text:"textB"},{id:2,text:"textC"}]; jQuery("#accessories").select2({ data: acceArray2, multiple: true, placeholder: "", width: 200 }); jQuery("#accessories").val("1"); jQuery("#accessories").trigger("change"); });Mis opciones aparecen cuando hago clic en el cuadro. También puedo seleccionar una o más opciones. Pero espero que se seleccione "textB" cuando abra la página. Esto funciona bien con la versión select2 original, pero no con la 4.1.0. La caja está simplemente vacía.
He pasado horas tratando de averiguar qué está mal, pero no puedo...
Como alternativa, puede cambiar la etiqueta de input para select . Parece funcionar a continuación:
jQuery(document).ready(function() { const acceArray2 = [{ id: 0, text: "textA" }, { id: 1, text: "textB" }, { id: 2, text: "textC" }]; jQuery("#accessories").select2({ data: acceArray2, multiple: true, placeholder: "", width: 200 }); jQuery("#accessories").val("1"); jQuery("#accessories").trigger("change"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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> <select id="accessories"></select>Puede agregar la opción selected en el objeto de matriz como:
jQuery(document).ready(function() { var acceArray2 = [{ id: 0, text: "textA" }, { id: 1, text: "textB", selected: true }, { id: 2, text: "textC", selected: true }]; jQuery("#accessories").select2({ data: acceArray2, multiple: true, placeholder: "", width: 200 }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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> <input type="text" id="accessories" />