jquery - 如何使用 jquery 检测多列表框中的更改

Question

使用下面的代码，我可以使用 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();
        });
    });

});

Answer 1

你可以简单地做

$('#select-to').change(function() {
    //your onChange code here
});
$('#select-from').change(function() {
    //your onChange code here
});

Answer 2

看起来您正在动态添加选项，但您只需要查看选择本身的更改事件..

所以你可以添加

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

监视选择更改...如果您想跟踪添加选项的事件，您可以在添加/删除选项的按钮的单击事件中执行此操作。

Answer 3

您可以创建自定义事件

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