如果已选择，则选择框中的禁用选项答案

【问题标题】：Disabled option from select box if already selected如果已选择，则选择框中的禁用选项
【发布时间】：2018-11-07 21:43:38
【问题描述】：

我有一个table，id = fields-list，在这个table4 中选择具有相同类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. Second Select 选择选项 3（页面中的所有选择框都应禁用选项 3 + 先前选择的选项 1） 3.首先选择选择选项4（现在所有选择框都应该禁用选项4 +选项3并启用选项1）

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案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>

【讨论】：

无法按预期工作....例如，在第一个选择中我选择 1 在第二个选择中我选择 2，当我转到第一个选择时我想选择 3 选项 1 应该是活跃但不是这样
如果从 select 中选择了另一个选项，我如何激活禁用的选项？
这不像 expected 那样工作，因为 expected 从你的问题来看不是很干净。请分享您解决所描述问题的尝试。并且可能会为它创建另一个问题

【解决方案2】：

您可以使用 .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】：

$('.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 不应该在一个select option 中有相同的value。

【讨论】：