从另一个选择框中删除选定的选项答案

【问题标题】：Remove selected option from another select box从另一个选择框中删除选定的选项
【发布时间】：2014-10-01 08:36:16
【问题描述】：

我正在尝试在单个页面中实现多个选择框。所有这些选择框都将具有相同的选项值。当我从选择框 1 中选择第一个选项时，应该从剩余的选择框中删除该选项。

<select name="selectBox1" id="selectBox1">
   <option value="option1">option1</option>
   <option value="option2">option2</option>
   <option value="option3">option3</option>
   <option value="option4">option4</option> 
</select>

<select name="selectBox2" id="selectBox2">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

<select name="selectBox3" id="selectBox3">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

我该怎么做？如果只有一个选择框，我知道如何删除或添加选项，但是对于多选框，我被卡住了。

【问题讨论】：

考虑到我自己，本周我已经回答了 2 个类似的问题。搜索网站。

标签： javascript jquery

【解决方案1】：

试试这个：你可以显示/隐藏它，而不是从列表中删除options，这样如果用户更改选择option，那么相同的option应该在select框的其余部分恢复。

$(document).ready(function(){
   $('select').on('change', function(event ) {
       //restore previously selected value
       var prevValue = $(this).data('previous');
       $('select').not(this).find('option[value="'+prevValue+'"]').show();
       //hide option selected                
       var value = $(this).val();
       //update previously selected data
       $(this).data('previous',value);
       $('select').not(this).find('option[value="'+value+'"]').hide();
   });
});

DEMO

【讨论】：

您的解决方案适用于两个选择框，但对于三个及更多选择框，它将取消隐藏在其他两个选择框之一中选择的选项
@jevgenig，是的，我更正了逻辑，请查看更新后的答案。
现在看起来好多了，但是您是否尝试过检查选项是否真的被隐藏了？ :) 我的意思是，我仍然可以在您的演示中选择相同的选项，我已经用“禁用/启用”方法更新了我的答案
@jevgenig，是的，这些选项被隐藏了，我已经使用浏览器 DOM 检查器检查了 DOM 结构。但是您的方法在用户体验方面很好，因为用户会知道哪些选项可用但已禁用。为你 +1！

【解决方案2】：

我推荐使用jquery，代码如下：

$("select").change(function(e){
    var $s = $(e.target);
    $("select").not($s).find("option[value="+$s.val()+"]").remove();
});

JSFiddle

更新（受 Bhushan Kawadkar 的回答启发）

以下是您可以改进的方法：

$("select").change(function(e){
    $("select option").removeAttr('disabled');
    $("select").each(function(i,s){
       $("select").not(s).find("option[value="+$(s).val()+"]").attr('disabled','disabled');
    });
});

JSFiddle

【讨论】：

【解决方案3】：

与其尝试破解您自己的多选框，不如使用真正的multi-select box？

<select name="selectBox1" id="selectBox1" multiple="multiple">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

【讨论】：

【解决方案4】：

给你：DEMO

$('select').on('change',function(){
    var value=$(this).val();
    $('select').not(this).each(function(){
        $(this).find('option[value='+value+']').remove();
    });
});

但请记住，这不是您在 SO 中提问的方式，您需要尝试一些代码，然后显示您尝试过的内容并寻求帮助解决问题！

【讨论】：

【解决方案5】：

试试下面的代码示例是否适合你：

$(document).ready(function(){
  $('select').on('change', function(event ) {
    var value = $(this).val();
    $(this).prop('disabled', false);

    $('select').find('option[value="'+ value +'"]')
     .attr('disabled', 'disabled')
     .hide();
  });
});

【讨论】：