To reset elements of one select2 dropdown on selection of another select2 dropdown

Question

I have two select2 dropdowns as below.

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-md-2">
                <label>Fruits</label>
            </div>
            <div class="col-md-4">
                <select asp-for="SelectedFruit" asp-items="@Model.FruitList" asp-class="form-control"></select>
            </div>

            <div class="col-md-2">
                <label>Vegetable(s)</label>
            </div>
            <div class="col-md-4">
                <select asp-for="SelectedVegetable" asp-items="@Model.VegetableList" asp-class="form-control"></select>
            </div>
        </div>
    </div>
</div>

Basically I want to remove selected value from one dropdown on change of another drop down. So this is my code in Jquery.

$('#SelectedFruit').on('change', function (e) {
   $('#SelectedVegetable').val('').trigger('change');
});

$('#SelectedVegetable').on('change', function (e) {
    $('#SelectedFruit').val('').trigger('change');
});

But this ends up going into a continuous loop as one change triggers the other event and so on. What are my other options?

Pranav C Balan · Accepted Answer · 2019-03-20T17:52:20.800

The trigger part(trigger('change')) causing the issue since you are triggering change event programmatically it will trigger the change event handler of that element so it happening repeatedly(since there you are triggering in both handler).

To fix it trigger only when the value is non-empty string.

$('#SelectedFruit').on('change', function (e) {
 if(this.value !== '')
   $('#SelectedVegetable').val('').trigge('change');
});

$('#SelectedVegetable').on('change', function (e) {
 if(this.value !== '')
   $('#SelectedFruit').val('').trigge('change');
});

$('#example1,#example2').select2({
  placeholder: 'Select a month'
});
$('#example1').on('change', function() {
  if (this.value !== '')
    $('#example2').val('').change();
})
$('#example2').on('change', function() {
  if (this.value !== '')
    $('#example1').val('').change();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example1" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>
<select id="example2" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

Or alternate approach is to re-initialize select2 after updating value.

$('#SelectedFruit').on('change', function (e) {
   $('#SelectedVegetable').val('').select2('destroy').select2();
});

$('#SelectedVegetable').on('change', function (e) {
    $('#SelectedFruit').val('').select2('destroy').select2();
});

$('#example1,#example2').select2({
  placeholder: 'Select a month'
});
$('#example1').on('change', function() {
  $('#example2').val('').select2('destroy').select2();
})
$('#example2').on('change', function() {
  $('#example1').val('').select2('destroy').select2();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example1" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>
<select id="example2" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

Reference : How to set selected value of jquery select2?

@TheFallenOne : why not ? what's the issue facing now ? – Pranav C Balan Mar 20 '19 at 17:35 — Pranav C Balan, Mar 20 '19 at 17:35

score 1 · Answer 2 · answered Mar 20 '19 at 17:50

This is how I go about doing it. I am not sure if this is the right way to do but this is what works for me.I am basically reloading the control instead of manipulating the values.

$('#SelectedFruit').on('change', function (e) {
    $('#SelectedVegetable').select2('destroy').val("").select2();   
});

$('#SelectedVegetable').on('change', function (e) {
    $("#SelectedFruit").select2('destroy').val("").select2();
});

Also to give credit where it's due, I got the idea from this answer.

To reset elements of one select2 dropdown on selection of another select2 dropdown

2 Answers2