如何在第二个选择框中禁用选择2个js选定值

Question

i got two select boxes both using select2 js, on the first one you can choose just one value, and on second you can choose multiple values, so what i want is to make this stuff work like this - if i choose "somecategory" on the second select box this option must be disabled, and if i choose "othercategory" on the select box the same option should be disabled on the first box as well.

here is the

    <select name="category" class="form-control catselect">
  /* here is some foreach stuff */
<option value="<?php echo $here we get ID;?>" <?php echo $here we get selected="selected";?>><?php echo $sub.lang_key($row->title);?></option>
</select>

<select name="multicat[]" class="form-control catmultiselect "  multiple="multiple">
  /* here is some foreach stuff */
<option value="<?php echo $here we get ID;?>" <?php echo $here we get selected="selected";?>><?php echo $sub.lang_key($row->title);?></option>
</select>

Answer 1

First, set your multicategory select box to be disabled. Next, give your select boxes an ID (this is optional. You can reference the select boxes by name instead of ID using "[name='category']" ). Then add an event handler to the select box:

$("#categorySelect").on("select2:select", function(e){
    var value = $("#categorySelect").val();
    var multicat = $("#multiCategorySelect");
    if(value == "othercategory") {
        multicat.prop('disabled', false); // Enable the multi-category select box
    } else {
        multicat.val(''); // If you want to clear the selection
        multicat.prop('disabled', true); // Set it back to disabled
    }
});