0

HTMLページに大量のドロップダウンがあり、それらが変更されたときにイベントを発生させたい（最終的にはajaxを介してすべてのドロップダウンをコンテンツで更新します）-しかし、今のところ私はそれをアラートにしようとしています選択したデータ要素を取り出します。ページ上のすべてのドロップダウンで起動するのではなく、対応する css クラスを持つドロップダウンだけを起動します。つまり、group1 group2 です。グループがいくつあるか分からないので、グループも動的でなければなりません。

http://jsfiddle.net/6BakA/

現時点でのjsフィドルがあります。最初の 4 つのドロップダウンの 1 つを変更した場合は 4 回、2 つ目のドロップダウンを変更した場合は 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 に答える