Question

我有一些像这样的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隐藏下一个下拉值我想在每个表行中验证这个下拉元素而不是所有（整个表）下拉元素。

例如：在我选择的第一行＆＃34; volvo＆＃34;然后选择元素＆＃34;沃尔沃＆＃34;被禁用在第二行中，我选择了相同的值＆＃34; volvo＆＃34;然后它也会在下一个选择元素中禁用。

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

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

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

});

Answer 2

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

             {
                    $("select option").prop("disabled", false); //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", true);

                            //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",false);
}

阻止每个表行的多个相同值选择

2 个答案: