防止多个相同值的选择 [英] Prevent Multiple Selections of Same Value

问题描述

我正在处理一个项目，我有一个表单，其中包含多个选择"输入，所有输入都具有相同的选项集.我想使用 jquery 禁用/隐藏其余选择"输入中的选项(如果它已被选中).

I am working on a project where I have a form that will have multiple 'select' inputs, all with the same set of options. I would like to use jquery to disable/hide an option in the rest of the 'select' inputs, if it has already been selected.

例如:

<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>

用户在第一次选择时选择了沃尔沃".我希望它从第二个选择中删除.

The user chooses 'Volvo' on the first select. I would like it removed from the second select.

任何信息将不胜感激.

推荐答案

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

Here there is the code to continue selecting and disabling all the times we want.

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

First thing is to enable every option, and then look at the selected values, and disable the options which coincides with the selected values.

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

These 2 steps are crucial because if you select again, the disabled values of before would continue disabled.

最新版本

更优雅的方式，我们使用 map() (在stackoverflow中有一个很好的解释method) 和 filter() jquery 函数来完成这项工作.更少的线条，我认为性能相同或更好.

The more elegant way, where we use map() (in stackoverflow there is a good explanation about this method) and filter() jquery functions to do the job. Less lines, and I think same performance or better.

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");   

});

新版本

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

I have edited my answer, this is my final version:

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");   

}

这篇关于防止多个相同值的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！