防止为每个表格行多次选择相同的值答案

【问题标题】：Prevent Multiple Selections of Same Value for each table row防止为每个表格行多次选择相同的值
【发布时间】：2015-02-13 22:10:53
【问题描述】：

我有一些这样的html

<table border="1">
<tr>
    <td>
        <select id="t00">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>  
        </select>
    </td>
    <td>
        <select id="t01">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>  
        </select>
    </td>
</tr>
<tr>
    <td>
        <select id="t10">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>  
        </select>
    </td>
    <td>
        <select id="t20">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>  
        </select>
    </td>
</tr>

这是我使用 PHP 命令生成的 HTML 代码，我已经这样做了。
用户选择第一行的第一个下拉值，而不是使用 JQuery 或 JavaScript 禁用相同的值或隐藏在下一个下拉值中。
我想在每个表格行中验证这个下拉元素，而不是所有（整个表格）下拉元素。

例如：在第一行中我选择了“volvo”，然后下一个选择元素“volvo”被禁用在第二行中，我选择了相同的值“volvo”，然后它也在下一个选择元素中被禁用。

JQuery 代码不会影响所有下拉（选择）元素。

This code is usefull but i want to check each table row

【问题讨论】：

您忘记发布您尝试过但不起作用的 JavaScript。

标签： javascript jquery html

【解决方案1】：

我在您提供的链接中使用相同的代码，但它与表格行相关：

$("select").change(function()
 {
     var tr = $(this).closest("tr");
        tr.find("select option").attr("disabled",""); //enable everything

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

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

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

});

【讨论】：

【解决方案2】：


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

  $(".question option").prop("disabled", true); //enable everything

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

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

  //re-enable elements
  $(".question option").filter(function () {
      return $.inArray($(this).val(), arr) == -1; //if value is not in the array of selected values
  }).prop("disabled",false);

  $(".question").selectpicker('refresh');
});

【讨论】：