避免使用jquery多次选择相同选项，但第一个选择标记除外

Question

我有一个名为Table1的表。 该表包含两个select标记，它们的值相同。

现在，我要检查每一行，是否有任何选项存在多次。 如果是，则警报选项已被选择。 但我不想检查第一个选择标记。

我的代码是

   $('#table1 tr').each(function() {                                        
     $(this).find('select:gt(0)').change(function(){//alert($(this).val())
      if( $('#table1').find('select option[value='+$(this).val()+']:selected').length>1)
      {
        alert('option is already selected');
        $(this).val($(this).find("option:first").val());   
      }
   });
});

但是我的问题是：假设我在第一个选择标签中选择了选项1（带有value1），然后试图选择选项Volvo（带有value1），它显示了警报。 我只想要select:gt(0)的警报。 我的代码有什么问题？ http://jsfiddle.net/tu6ce8ab/10/

Answer 1

您只需要每row第二个dropdown检查option ，如下所示， :gt(0)在检查时错过了:gt(0)

DEMO

$('#table1 tr').each(function() {                                       
    $(this).find('select:gt(0)').change(function(){//alert($(this).val())
        if( $('#table1').find('select:gt(0) option[value='+$(this).val()+']:selected').length>1){
                                    //^^^^^Need this
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());   
        }
    });
});

Answer 2

问题是$('#table1').find('select option[value='+$(this).val()+']:selected')选择器还会检查第一列中的选择。

另请注意，您需要从大于first的列中选择元素，因此可以使用nth-child代替#table1 tr td:nth-child(n+2) select 。

尝试这样的事情：

 var $selects = $('#table1 tr td:nth-child(n+2) select').change(function() { if ($selects.find('option[value=' + this.value + ']:selected').length > 1) { alert('option is already selected'); this.options[0].selected = true; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3> Table 1</h3> <table id="table1" border="1"> <tr> <td> <select> <option value="--select--">--select--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> <td>select any option</td> <td> <select> <option value="--select--">--select--</option> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3">VW</option> <option value="4">Audi</option> </select> </td> </tr> <tr> <td> <select> <option value="--select--">--select--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> <td>select any option</td> <td> <select> <option value="--select--">--select--</option> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3">VW</option> <option value="4">Audi</option> </select> </td> </tr> <tr> <td> <select> <option value="--select--">--select--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> <td>select any option</td> <td> <select> <option value="--select--">--select--</option> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3">VW</option> <option value="4">Audi</option> </select> </td> </tr> </table> <br> 

Answer 3

您有2个选项1.将ID分配给然后使用该ID，而不是使用表ID并查找select。 意味着您可以将$（this）.find（'select：gt（0）'）。change（）更改为$（'＃select1'）。change（）

2. 更改第二个下拉选项值。 例如，使用沃尔沃代替沃尔沃