Question

我看到这个只使用一个选择框，但无法通过多个选择框进行操作。

我们说我有两个选择：

<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>

如果在任何选择框中选中，我如何设置锁定选项audi？

我正在尝试使用：

    $(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

您需要保存该值并将其传递给其他选项。像这样：

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

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

编辑 - 我改变它接受一组值

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

编辑 - 我建议使用复选框而不是多个选择。更加用户友好，直观，更容易选择/禁用不同的选项。（见代码丛）

// 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

你可以采取其他方式

$('.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

我发现使用jQuery更短更直接：

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

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

3 个答案: