Question

我在html页面上有大量下拉菜单，我想在事件发生变化时触发事件（最终它会通过ajax更新所有带内容的下拉菜单） - 但是现在我只是想尝试让它提醒我选择的数据元素。我不希望它在页面上的每个下拉列表中触发，只是具有相应css类的下拉列表。即group1 group2。这些小组也必须是动态的，因为我不知道可能有多少。

http://jsfiddle.net/6BakA/

上面有一个小小的小提琴，它现在是如何形成的。我希望它只能在你改变前4个下拉菜单中的一个时提醒4次，而当你做第二个下拉时只提醒两次。但显然我做错了什么！

我的HTML是：

<select id="test1" class="group1" data-type="Select Box 1">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

        <select id="test1" class="group1" data-type="Select Box 2">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

        <select id="test1" class="group1" data-type="Select Box 3">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

            <select id="test1" class="group1" data-type="Select Box 4">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

        <select id="test1" class="group2" data-type="Select Box 5">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 

        <select id="test1" class="group2" data-type="Select Box 6">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>

我的JS是：

$(document).ready(function() {

        $('select').change(function() {

            $('.group1').each(function() {
               alert($(this).data('type'));
            });


            $('.group2').each(function() {
               alert($(this).data('type'));
            });


        });    

    });

Answer 1

你可以这样做

$(document).ready(function() {
   $('select').change(function() { // <-- bind events to all selects    
        $('.'+$(this).attr('class')).each(function(){  // <-- iterate through each element that has same class
// you don't need to know the class - just use the current element's class that triggered the event
            alert($(this).data('type')); 
            // do what you need to here
        });
    });
});

http://jsfiddle.net/wirey00/6BakA/4/

甚至更好，因为你不知道有多少选择，委托事件将更有效，因为父元素将监听和处理事件。您可以将body替换为加载dom时可用的select框的任何父元素

$('body').on('change','select',function(){ 
        $('.'+$(this).attr('class')).each(function(){  
            alert($(this).data('type')); 
            // do what you need to here
        });
});

http://jsfiddle.net/wirey00/6BakA/5/

Answer 2

你应该这样做：

$(document).ready(function() {

        $('select.group1').change(function() {

            $('.group1').each(function() {
               alert($(this).data('type'));
            });
});

$('select.group2').change(function() {

            $('.group2').each(function() {
               alert($(this).data('type'));
            });


        });    

    });

具有特定类的所有下拉列表上的jQuery fire事件

2 个答案: