Question

使用下面的代码我可以使用add'remove按钮添加和删除元素。现在我尝试在任何这些列表框中发生更改时检测更改。我如何使用jQuery进行此操作？< / p>

$(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

看起来您正在动态添加选项，但您只需要在选择中自己观看更改事件..

所以你可以添加

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

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

Answer 2

你可以简单地做

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

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

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

3 个答案: