如果使用jquery向页面添加了多个下拉列表,请检查是否选择了相同的值

时间:2013-04-29 08:08:27

标签: jquery html select

使用jquery检查以下内容的最佳方法是什么:

如果使用jquery向页面添加了多个下拉列表,请检查是否选择了相同的值

我在页面上有一个下拉列表:

<select name="brand" class="brands" onchange="some function to check for the same value>
 <option>Brand 1</option>
 <option>Brand 2</option>
 <option>Brand 3</option>
</select>

我还可以动态添加更多下拉菜单。每个动态下拉列表都使用相同的数据作为选项。所以当我点击添加按钮以显示新的下拉列表时,我可以这样做:

<select name="brand_1" class="brands" onchange="some function to check for the same value">
 <option>Brand 1</option>
 <option>Brand 2</option>
 <option>Brand 3</option>
</select>

再次:

<select name="brand_2" class="brands" onchange="some function to check for the same value">
 <option>Brand 1</option>
 <option>Brand 2</option>
 <option>Brand 3</option>
</select>
等等......

我猜我可以使用类元素,也许是jquery中下拉列表的onchange()事件,但不确定这样做的最佳方法。 任何想法或帮助指出我正确的方向将非常感激。

感谢

JC

1 个答案:

答案 0 :(得分:1)

我认为这可能是一个解决方案。 FIDDLE
但只有select元素是一个接一个的才能起作用。

$('select').on('change', function () {
    var val = $(this).val(); // get the value of the current changed select
    var i = $(this).index(); // get it's index (position in the group starting from 0)
    $('select:not(:eq('+i+'))').each(function () { // loop through each select 
        if ($(this).val() === val) { // check if the value of the next select 
                                     // is the same as the changed one
            alert($(this).index()+' has the same value'); 
            // alert the ones with the same value 
       }
    });
});