禁用已在另一个多选框中选择的选项

Question

I have seen this working with a single select box, but couldn't manage to do it with multiple select boxes.

Let's say i have two multiple selects:

<select class='test' multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select class='test' multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

How can I manage to lock the option audi if selected in any of the select boxes?

I was trying using:

    $(document).on('change', function(e) {
         e.preventDefault();
         $('.test').find('option').prop('disabled', false);
         $('.test').each(function() {
         $('.test').not(this).find('option[value="' + this.value + '"]').prop('disabled', true);
         });
    });

Answer 1

You need to save the value and pass it to the other option. Like this:

 $('.test').on('change', function() {
    var selected = $(this).children(':selected').val();
    $('.test').val(selected);
 });

http://codepen.io/sandrina-p/pen/KrZRXj

• EDIT - i changed it to accept an array of values

   $('.test').on('change', function() { var selected = $(this).val(); $('.test').val(selected); }); 

• EDIT - I recommend to use checkboxs than multiple select. Is more user friendly, intuitive and easier to select/disable the different options. (see the codepen)

   // 2 arguments: the first group of cars and the other group of cars function selectCar(carInputs, otherCarInputs) { carInputs.each(function(){ if ($(this).is(":checked")) { // it is checked var value = $(this).val(); console.log('checked: '+ value ); //filter otherCarsInputs and disable the one that the user selected. otherCarInputs.filter(function(){ if(this.value === value) { return true; } }).prop('disabled', 'disabled'); } else { var value = $(this).val(); console.log('unchecked: '+ value ); //do the inverse. is the user uncheck the input, enable it on the other team otherCarInputs.filter(function(){ if ($(this).is(':disabled') && this.value == value) { return true; } }).prop('disabled', ''); } }); } //on each input, calls the function with the right parameters (group car) $('input').on('change', function(){ if ($(this).hasClass('car1') ) { selectCar($('.car1'), $('.car2')); } else { selectCar($('.car2'), $('.car1')); } }); 

Answer 2

You can do it other way

$('.test option').click(function(){
  var op = $(this).attr('value');
  // commented out for multiple select ability
  //$('.test option').attr('disabled', null);
  $('.test option[value='+op+']').not(':selected').attr('disabled', $(this).filter(':selected').length > 0 ? true : null);
});

Answer 3

I find this to be shorter and more straightforward using jQuery:

$('#select-element-id option').on('click', function() {
        $(this).attr('disabled', true);
});