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

Question

我有一个 table id = fields-list 并且在这个 table 4 选择框中同一个类 db-list。现在我想如果第一个 select 中的 option 被选中，则在其余的选择框中禁用此 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. 第二次选择选择选项 3(页面中的所有选择框都应禁用选项 3 + 先前选择的选项 1)3.首先选择选择选项4(现在所有选择框都应该禁用选项4 +选项3并启用选项1)

Answer 1

1. table 应更改为其他内容，例如 div，因为 table 应包含 thead、tbody 或 tr

2. 这一行:

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

   /li>

将禁用选择，但不是选项，所以试试这个:

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