阻止每个表行的多个相同值选择 [英] Prevent Multiple Selections of Same Value for each table row

问题描述

我有一些像这样的HTML

i have some html like this

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

这是我的HTML代码生成通过使用PHP命令我已经做到了。

用户选择第一行第一个下拉值比禁用相同值或使用JQuery或JavaScript隐藏下一个下拉值。

i想要在每个表行中验证这个下拉元素而不是所有（整个表）下拉元素。

This is my HTML code genrated by using PHP command i am already did it.
User choose first row first drop down value than the same value is disabled or hide in next drop down value using JQuery or JavaScript.
i want validate this drop down element in each table row not all(entire table) drop down element.

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

for eg: in first row i selected "volvo" then next select element "volvo" is disabled in second row i selected same value "volvo" then it also disabled in next select element.

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

JQuery code not affect all drop down(select) element.

这段代码很有用，但我想查看每个表格行

推荐答案

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

I use the same code in the link you provided but it's contexted to the table row :

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

});

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