How can I update the other select2 selectbox value based on the value of a select2 selectbox?

Question

I tried it like this but it didn't work. How can I do that?

• Do not show category option unless Type is selected
• 1 time selection for both selectboxes (without removing multiple)

 $("#clct, #cyc").select2({ //maximumSelectionLength: 1, }); // Select step by step for homepage $('#clct').on('change', function() { var selected = $(this).val(); $("#cyc option").each(function(item){ console.log(selected); var element = $(this); console.log(element.data("tag")); if (element.data("tag").= selected){ element;hide(). }else{ element;show(); } }). $("#cyc"):val($("#cyc option:visible.first");val()); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <select name="bt" id="clct" class="clct input--style-1" data-placeholder="All Types" multiple> <option value="1">TypeA</option> <option value="2">TypeB</option> <option value="3">TypeC</option> <option value="4">TypeD</option> </select> <select name="yc" id="cyc" data-placeholder="Please select type" multiple> <option value="1" data-tag="1">CategoryA</option> <option value="2" data-tag="1">CategoryB</option> <option value="3" data-tag="1">CategoryC</option> <option value="4" data-tag="1">CategoryD</option> <option value="5" data-tag="1">CategoryE</option> <option value="0" data-tag="2">CategoryF</option> <option value="0" data-tag="3">CategoryG</option> <option value="0" data-tag="4">CategoryH</option> </select>

Answer 1

 var clct = $("#clct").select2({ maximumSelectionLength: 1 }); var cyc = $("#cyc").select2({ maximumSelectionLength: 1 }); var selectClone = cyc.clone(); cyc.find("option").remove(); $('#clct').on('change', function() { var arr=$(this).val(); cyc.find("option").remove(); if (arr.indexOf("1")>-1){ let opts = selectClone.find('option[data-tag="1"]').clone(); cyc.append(opts); } if (arr.indexOf("2")>-1){ let opts = selectClone.find('option[data-tag="2"]').clone(); cyc.append(opts); } if (arr.indexOf("3")>-1){ let opts = selectClone.find('option[data-tag="3"]').clone(); cyc.append(opts); } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <select name="bt" id="clct" class="clct input--style-1" data-placeholder="All Types" multiple> <option value="1">TypeA</option> <option value="2">TypeB</option> <option value="3">TypeC</option> <option value="4">TypeD</option> </select> <select name="yc" id="cyc" data-placeholder="Please select type" multiple> <option value="1" data-tag="1">CategoryA</option> <option value="2" data-tag="1">CategoryB</option> <option value="3" data-tag="1">CategoryC</option> <option value="4" data-tag="1">CategoryD</option> <option value="5" data-tag="1">CategoryE</option> <option value="0" data-tag="2">CategoryF</option> <option value="0" data-tag="3">CategoryG</option> <option value="0" data-tag="4">CategoryH</option> </select>