Estoy usando el cuadro de selección y obtengo los valores del backend.
Quiero crear un diagrama de árbol. Pero no pude porque los valores no me llegaron en el orden que yo quería.
$(".js-select2-custom").select2({ minimumResultsForSearch: "Infinity", singleMultiple: true, }); function selectNumber() { let select = $(".js-select2-custom"); select.next("span.select2").find(".select2-selection__choice").remove() select.next("span.select2").find("ul").prepend( function () { let count = select.select2("data").length; $(".countTotalSelect2").remove() return ( "<li class='countTotalSelect2' style='font-size: 14px;line-height: 26px;color: black;'>" + count + " " + "unitsSelected" + "</li>" ); } ) } $(".js-select2-custom").on("select2:select",function(){ selectNumber() }) .js-select2-custom{ width:300px; } <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" /> <select class="js-select2-custom" multiple=""> <option value="12" data-parent-id="">aa</option> <option value="13" data-parent-id="12">bb</option> <option value="15" data-parent-id="13">cc</option> <option value="18" data-parent-id="12">dd</option> <option value="19" data-parent-id="18">ee</option> <option value="22" data-parent-id="13">ff</option> <option value="24" data-parent-id="12">gg</option> <option value="25" data-parent-id="24">hh</option> </select> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> Aquí está la forma que quiero. Los que tengan un valor de identificación principal aparecerán debajo y se desplazarán 10 px a la derecha. 