Ran into pretty interesting situation today while working on a client's administration interface. It made me realize that I'm probably not the first person to run into this.

In one of their sections they have a list of records. At the very top of the list is a select box element that allows you to pick an action and apply it to any chosen records.

Since the list of records is pretty long and requires a lot of scrolling, my client asked if it would be possible to have the same select box appear at the bottom of the list as well. Simple enough, but they also asked if it was possible to have one select box mirror the current selection to the other box at the bottom of the page.

So, to implement this feature, I decided to use a bit of jQuery magic.

The elements in question are both named 'action', so what I did was simply bind a 'change' even using 'select[name=action]' as the selector. Once this event is invoked, it just copies the value of the current box to all other boxes on the screen with the same name.

Take the following code:

$(document).ready(function()
{
    $('select[name=action]').bind('change', function()
    {
        $('select[name=action]').val($(this).val());
    });
});

This isn't anything special, but just shows how jQuery can rise to the challenge of any problem.

Loading mentions Retweet