防止多个选择相同的值

Question

我正在做一个项目，我有一个表单，该表单将具有多个“选择”输入，所有输入都具有相同的选项集。我想使用 jquery 禁用/隐藏其余“选择”输入中的选项，如果它已被选中。

例如：

<select id="1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

<select id="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

用户在第一次选择时选择“沃尔沃”。我希望它从第二个选择中删除。

任何信息将不胜感激。

Answer 1

这里有继续选择和禁用我们想要的所有时间的代码。

首先是启用每个选项，然后查看所选值，然后禁用与所选值一致的选项。

这两个步骤至关重要，因为如果您再次选择，之前的禁用值将继续禁用。

最新版本

更优雅的方式，我们使用 map() (in stackoverflow there is a good explanation about this method) 和 filter() jquery 函数来完成这项工作。行数更少，我认为性能相同或更好。

http://www.jsfiddle.net/dactivo/keDDr/

$("select").change(function()
 {

        $("select option").attr("disabled",""); //enable everything

     //collect the values from selected;
     var  arr = $.map
     (
        $("select option:selected"), function(n)
         {
              return n.value;
          }
      );

    //disable elements
    $("select option").filter(function()
    {

        return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
     }).attr("disabled","disabled");   

});

新版本

我已经编辑了我的答案，这是我的最终版本：

http://www.jsfiddle.net/dactivo/kNbWc/

$("select").change(function()
                   {

        $("select option").attr("disabled",""); //enable everything
        DisableOptions(); //disable selected values

                   });


function DisableOptions()
{
    var arr=[];
      $("select option:selected").each(function()
              {
                  arr.push($(this).val());
              });

    $("select option").filter(function()
        {

              return $.inArray($(this).val(),arr)>-1;
   }).attr("disabled","disabled");   

}

旧版本

http://www.jsfiddle.net/AyxL3/

$("select").change(function()
                   {

        $("select option").attr("disabled",""); //enable everything
        DisableOptions(); //disable selected values

                   });


function DisableOptions()
{

    $("select option").filter(function()
        {
              var bSuccess=false; //will be our flag to know it coincides with selected value
              var selectedEl=$(this);
              $("select option:selected").each(function()
              {

                  if($(this).val()==selectedEl.val())
                  {
                       bSuccess=true; //it coincides we will return true;
                       return false; // this serves to break the each loop
                   }               

              });
              return bSuccess;
   }).attr("disabled","disabled");   

}

Answer 2

要隐藏它们，请使用以下方法（因为 IE 错误阻止在 OPTION 上使用 CSS“显示”属性设置为“无”）：

-将原始选项列表存储在数组中

-具有从数组构建选择#x的功能，滑动先前选择的项目

-为所有选择分配一个 onchange 处理程序，该处理程序将遍历所有以后的选择并调用此函数。

var option_value_order = {'volvo', 'saab', 'mercedes'};
var option_display_strings = new Array();
option_display_strings['volvo'] = 'Volvo'; 
//...

// Assume each of the selects' ID value is "select_1", "select_2" instead of "1", "2"
function redraw(selectNum) {
    var selectId = "select_" + selectNum;
    var s = document.getElementById(selectId);
    s.options.length = 0; // empty out
    var next = 0;
    for (var i = 0; i < option_value_order.length; i++) { 
        var skip = 0;
        for (var select_index = 0; select_index < selectNum; select_index++) {
            if (document.getElementById("select_"+select_index).selected == i)
                skip = 1;
            if (skip == 0) {
                var o = option_value_order[i];
                s.options[next] = o;
                // Don't recall how to set value different from option display, 
                // using option_display_strings[o] 
                next++;
            }
        }
    }
}

var total_selects = 2;

function change_later_selects(s) {
    var select_num = find_number(s.id); "this returns number 2 for "select_2" - homework
    for (var i = select_num + 1; i <= total_selects; i++) {
        redraw(i);
    }
}

然后是 HTML

<select id="select_2" onchange="change_later_selects(this);">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

Answer 3

这是一个工作示例：

http://jsfiddle.net/aNxBy/

使用您的数据，您必须这样做：

$(document).ready(function() {
    $('select').change(function() {
        $('option[value=' + $(this).val() + ']').attr('disabled', 'disabled');
    });
});

但是请注意，在您将其更改为另一个值后，这不会禁用禁用。我没有在此处添加此内容，因为您没有明确指定您在禁用该选项后需要做什么...实际上可能有多种情况。

您可以做的一件事是在更改事件触发时循环遍历所有相关的select 元素，找到所有选定选项的值，并在适当的情况下禁用。

Answer 4

这个问题是搜索这个问题的答案的顶级谷歌结果，所以我会在这里发布一个更新的答案。这与 netadictos 的答案几乎完全相同，但适用于禁用和重新启用选择值并使用 prop 而不是 attr。经验证可在 Chrome 52 中运行。

    $("select").change(function()
    {
        $("select option").prop("disabled",""); //enable everything

        //collect the values from selected;
        var  arr = $.map
        (
            $("select option:selected"), function(n)
            {
                return n.value;
            }
        );

        //disable elements
        $("select option").filter(function()
        {
            return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
        }).prop("disabled","disabled");

        //re-enable elements
        $("select option").filter(function()
        {
            return $.inArray($(this).val(),arr)==-1; //if value is not in the array of selected values
        }).prop("disabled","");
    }).trigger("change"); // Trigger the change function on page load. Useful if select values are pre-selected.

Answer 5

你可以做类似的事情

var curSelected = $('#1 option:selected').val();
$('#2 option[value="'+curSelected+'"]').remove()

（当然，如果您打算通过change 处理程序将更改添加到选项本身，您可以直接使用$(this)）

当然这不会向后工作:)

在这种情况下，我建议您直接使用 JavaScript 构建您的选项，以便您拥有完整的蓝图，在需要时从中删除元素，然后再将它们替换为各种 select

Answer 6

$(document).ready(function() {
    $('#1').change(function() {
        $('option.hidden').removeClass('hidden')
        $('#2 option[value=' + $(this).val() + ']').addClass('hidden');
    });
    $('#2').change(function() {
        $('option.hidden').removeClass('hidden')
        $('#1 option[value=' + $(this).val() + ']').addClass('hidden');
    });
});

确保你有css

.hidden {display:none}

Answer 7

看看this。它：

1. 获取您刚刚更改的下拉列表的 ID
2. 循环遍历所有选择列表
3. 从所有其他列表中删除您刚刚选择的项目