0
192
VisualizaçõesIf there is a parent id, it should appear below it (tree diagram)
I'm using select box and I'm getting the values from the backend.
I want to create a tree diagram. But I couldn't because the values didn't come to me in the order I wanted.
$(".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>Here is the shape I want. Those with parent id value will come under it and will shift 10px to the right.
·
Juan Pablo Isaza
Responde à pergunta