CODEWITHSUNDEEP
javascripthtmljquerybootstrap-4
Henry Page
Henry Page

Reputation: 93

Deselect all other select elements (Bootstrap) (jQuery)

I posted a similar question a few days ago, but it seems that the reference solution did not work as there seemed to be a bootstrap conflict, where the jQuery was affecting the select element instead of the additional divs generated by bootstrap

For reference, I have a 2 <select> elements which look like the following:

<select class="selectpicker form-control alternate-linked-select-box" id="input-room">
  <option>...</option>

</select>

The intended, functionality I am trying to achieve, is to completely deselect the other element when the current <select> element has been changed.

The previously proposed solution with jQuery was this. I'll also include it here for reference:

var sels = $(".alternate-linked-select-box").on("change", e => 
  sels.not(e.target).find("option:selected").prop("selected", false)
);

However, this does not work with bootstrap as the select elements do not seem to be affected.

Since then, I've also tried disabling everything to see if it had any affect, but to no avail.

$('.alternate-linked-select-box').selectpicker('val', '');

I presume I am doing something very wrong, as I have never really used bootstrap before. Any help is appreciated!

Upvotes: 0

Views: 142

Answers (1)

Mingze Li
Mingze Li

Reputation: 390

For example you have 2 selections with id input-room1 and input-room2, apply below code to reset room2 selection when room1 selection is changed.

$(document).ready(function(){
  //init
  $("#input-room1").prop("selectedIndex", -1);
  $("#input-room2").prop("selectedIndex", -1);
})
$('#input-room1').on('change',function(){
  $("#input-room2").prop("selectedIndex", -1);
})

Upvotes: 1

Related Questions