0

以下のコードを使用して、add'removeボタンを使用して要素を追加および削除できます。これらのリストボックスのいずれかで変更が発生したときに変更を検出しようとしています。jQueryを使用してそれを行うにはどうすればよいですか？

$(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });

});
4

3 に答える 3

0

カスタムイベントを作成できます

$(document).ready(function() {    
    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
                $('#select-to,#select-from').trigger('customchange');
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $('#select-to,#select-from').trigger('customchange');
            $(this).remove();
       });
    });
});

次に、任意の関数をそのイベントにバインドします。

$('#select-to').bind('customchange', function(){
  //do whatever
});
于 2012-04-13T15:45:17.600 に答える
0

オプションを動的に追加しているように見えますが、選択したもの自体の変更イベントを監視するだけで済みます。

だからあなたは追加することができます

//jquery 1.7.1
$('#select-to').on('change', function(){});
$('#select-from').on('change', function(){});

選択の変更を監視するには...追加されるオプションのイベントを追跡する場合は、オプションを追加/削除するボタンのクリックイベントでそれを行うことができます。

于 2012-04-13T15:31:02.020 に答える
0

あなたは簡単に行うことができます

$('#select-to').change(function() {
    //your onChange code here
});
$('#select-from').change(function() {
    //your onChange code here
});
于 2012-04-13T15:35:28.250 に答える