Question

Using the code below I am able to add and remove elements using the add’remove buttons.Now Im trying to detect changes when a change occurs in any of these list boxes.How do i go about doing that using 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

It looks like youre adding options dynmically, but you would only need to watch change events in the select’s themselves..

so you could add

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

to monitor a selection change…if you want to follow the event of the options being added, you could do that in the click event of the button that also adds/removes the options.