CODEWITHSUNDEEP
javascriptjquery
user001
user001

Reputation: 505

Update dropdown options based on selected value in jQuery multi-select select2

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/[email protected]/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/[email protected]/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 i.e., 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?

Upvotes: 0

Views: 308

Answers (1)

Y.T.
Y.T.

Reputation: 2729

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/[email protected]/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/[email protected]/dist/js/select2.min.js"></script>

Upvotes: 2

Related Questions