Reputation: 93
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
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