I have two select boxes, using select2 js plugin. Both the drop-downs have the same options. I want to disable option selected in the 2nd select box if it's selected on the first one and vice versa.
Here is the code:
jQuery(document).ready(function() { jQuery('.minimal').select2(); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select class="minimal" name="coin1"> <option value="btc">btc</option> <option value="usd">usd</option> <option value="eth">eth</option> </select> <select class="minimal" name="coin2"> <option value="btc">btc</option> <option value="usd">usd</option> <option value="eth">eth</option> </select>
I dived into the documentation and this should do the trick:
It's one function for both selects and it uses the name
attribute to differ.
jQuery(document).ready(function() { jQuery('.minimal').select2(); }); $('select.minimal').on('select2:select', function(e) { let elem; elem = ($(this).attr("name") == "coin1") ? 2 : 1; //set the elementIndex //reset $('select[name="coin' + elem + '"] > option').removeAttr("disabled"); $('select[name="coin' + elem + '"]').select2(); const value = $(this).select2('data')[0].text; //select the value $('select[name="coin' + elem + '"] > option[value="' + value + '"]').attr("disabled", true); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select class="minimal" name="coin1"> <option value="btc">btc</option> <option value="usd">usd</option> <option value="eth">eth</option> </select> <select class="minimal" name="coin2"> <option value="btc">btc</option> <option value="usd">usd</option> <option value="eth">eth</option> </select>
See code comments below:
$(document).ready(function() {
$('.minimal')
.select2()
.change(function() { // when changed
let val = $(this).val(); // save the current value
$('.minimal').not(this).find('option') // grab options from other select
.prop('disabled', function() { // disable those equal to current value
return $(this).val() == val;
})
.select2(); // re-establish select2
});
});
$(document).ready(function() { $('.minimal') .select2() .change(function() { let val = $(this).val(); $('.minimal').not(this).find('option').prop('disabled', function() { return $(this).val() == val; }).select2(); }); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select class="minimal" name="coin1"> <option value="btc">btc</option> <option value="usd">usd</option> <option value="eth">eth</option> </select> <select class="minimal" name="coin2"> <option value="btc">btc</option> <option value="usd">usd</option> <option value="eth">eth</option> </select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.