Question

0

188

Views

If 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.

about 4 years ago · Juan Pablo Isaza

Answer question

0

188

If there is a parent id, it should appear below it (tree diagram)

Find remote jobs

Andres GPT