CODEWITHSUNDEEP
jqueryjquery-select2
Shainnah Jane
Shainnah Jane

Reputation: 231

Cleared dropdown select2 using close button in JQUERY

Good day, I'm confused is there any triggering point for this action in select2 dropdown? I think it is default in select2. The thing is whenever I click the close button under division dropdown the section dropdown should be cleared out. Any Idea is much appreciated.

enter image description here

Upvotes: 1

Views: 3059

Answers (1)

Swati
Swati

Reputation: 28522

You can use select2:unselect event of select2 plugin. This will get called when you unselect any option then inside this you can use val(null).trigger('change') to clear other select-box.

Demo Code :

$("#one ,#second").select2({
  allowClear: true,
  placeholder: 'placeholder'
});
//when unselected..
$('#one').on('select2:unselect', function(e) {
  $('#second').val(null).trigger('change'); //clear other
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<select id="one" class="form-control" style="width:150px">

  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

<select id="second" class="form-control" style="width:150px">
  <option>orange</option>
  <option selected="selected">white</option>
  <option>purple</option>
</select>

Upvotes: 1

Related Questions