Question

我有一个table，其id = fields-list，并且在此table 4选择框中，具有相同的类db-list。现在，我想如果选择了第一个option中的select，请在其余的选择框中禁用此option

<table id="fields-list" class="table table-hover">
   <select class="form-control db-list" >
       <option value="">All</option>
       <option value="d">1</option>
       <option value="t">2</option>
       <option value="t">3</option>
       <option value="h">4</option>
   </select>
   <select class="form-control db-list" >
       <option value="">All</option>
       <option value="d">1</option>
       <option value="t">2</option>
       <option value="t">3</option>
       <option value="h">4</option>
   </select>
</table>

我尝试过这样：

$('.db-list').on('change', function () {
  if( $('#fields-list').find('select option[value='+$(this).val()+']:selected').length>1){
      $(this).val($(this).find("option:first").val()).prop('disabled', true);
  }           
});

但是不行。你能帮我吗？提前谢谢，对不起我的英语。

情况如何工作： 1.首先选择选择选项1（页面上的所有选择框均应禁用选项1）； 2. Second Select选择选项3（页面上的所有选择框都应禁用选项3 +先前选择的选项1） 3.首先选择选项4（现在，所有选择框都应禁用选项4 +选项3并启用选项1）

Answer 1

table应该更改为其他内容，例如div，因为表应该包含thead，tbody或tr
此行：

$(this).val($(this).find("option:first").val()).prop('disabled', true);

将禁用选择而不是选项，因此请尝试以下操作：

$('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);

工作示例

$('.db-list').on('focus', function () {
    var ddl = $(this);
    ddl.data('previous', ddl.val());
}).on('change', function () {
    var ddl = $(this);
    var previous = ddl.data('previous');
    ddl.data('previous', ddl.val());

    if (previous) {
        $('#fields-list').find('select option[value='+previous+']').removeAttr('disabled');
    }

    $('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fields-list" class="table table-hover">
   <select class="form-control db-list" >
       <option value="">All</option>
       <option value="d">1</option>
       <option value="t">2</option>
       <option value="t">3</option>
       <option value="h">4</option>
   </select>
   <select class="form-control db-list" >
       <option value="">All</option>
       <option value="d">1</option>
       <option value="t">2</option>
       <option value="t">3</option>
       <option value="h">4</option>
   </select>
</div>

Answer 2

$('.db-list:first').on('change', function () {
    // enable all first
    $('.db-list:last option').prop('disabled', false);

    // disable the selected value
    $('.db-list:last option[value="'+ $(this).val() +'"]').prop('disabled', true);    

});

顺便说一句，option中的value select中不应包含相同的option。

Answer 3

您可以使用.filter（）获取具有相似值的选项

$('select').on('change', function() {
    $('option').prop('disabled', false);
    $('select').each(function() {
        var val = this.value;
        $('select').not(this).find('option').filter(function() {
            return this.value === val;
        }).prop('disabled', true);
    });
}).change();

如果已选择，则从选择框中禁用选项

3 个答案: