jQuery multi-select select2 根据选择值更新下拉选项

Question

I am sending an array of objects from the backend to populate the select2 dropdown.

 my_array = [ {"id": "first_issue", "text": "First Issue"}, {"id": "second_issue", "text": "Second Issue"}, {"id": "no_issue", "text": "No Issue"} ] $('#issues').select2({ placeholder: 'Select Issue Type', allowClear: true, data: my_array });

 #issues { width: 200px; }

 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/> <div class="row"> <div class="columns medium-6"> <label for = "issues" style="text-align: left;" >Issues</label> <select class="js-select2" id="issues" name="issues" multiple></select> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

So I am populating the select2 box as above. This select2 is multi-select dropdown. Now what I need to do is to conditionally update the data parameter of the select2 box so that whenever the option which is an issue ie, any option other than no_issue is selected then the no_issue option should not be shown in the dropdown and if it is already selected then it should be removed from the selection and vice versa should happen. How can I do the same?

Answer 1

Please let me know if this achieves what you want. You can test it out with the snippet below.

 my_array = [ {"id": "first_issue", "text": "First Issue"}, {"id": "second_issue", "text": "Second Issue"}, {"id": "no_issue", "text": "No Issue"} ] $('#issues').select2({ placeholder: 'Select Issue Type', allowClear: true, data: my_array }); $("select").on("select2:select", function(evt) { let select = $(this); let remove = function(toRemove){ let values = select.val(); for (let i = 0; i < toRemove.length; i++) { let index = values.indexOf(toRemove[i]); if (index >= 0) { values.splice(index, 1); } } $("select").val(values).change(); }; let indexInDOM = $(evt.params.data.element).index(); if (indexInDOM === 2) { remove(["first_issue", "second_issue"]); } else { remove(["no_issue"]); } });

 #issues { width: 200px; }

 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/> <div class="row"> <div class="columns medium-6"> <label for = "issues" style="text-align: left;" >Issues</label> <select class="js-select2" id="issues" name="issues" multiple></select> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>