0

我在一个 html 页面上有很多下拉列表，我想在它们发生变化时触发事件（最终它将通过 ajax 更新所有带有内容的下拉列表） - 但现在我只是想让它警觉出我选择的数据元素。我不希望它在页面上的每个下拉菜单上触发，只是那些具有相应 css 类的下拉菜单。即group1 group2。这些团体也必须是动态的，因为我不知道可能有多少。

http://jsfiddle.net/6BakA/

上面有一个 js 摆弄它目前的情况。我希望它只会在您更改前 4 个下拉菜单中的一个时发出 4 次警报，而在您更改第二个下拉菜单时只会发出 2 次警报。但显然我做错了什么！

我的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'));
            });


        });    

    });
4

2 回答 2

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/

或者甚至更好，因为你不知道会有多少选择，委托事件会更有效，因为父元素将监听和处理事件。您可以用加载 dom 时可用body的框的任何父元素替换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/

于 2012-08-16T13:57:22.600 回答
0

你应该这样做：

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


        });    

    });
于 2012-08-16T13:49:11.717 回答