How to synchronize scrolling of two listboxes?

I have two list boxes with one to one mapping. They are also scrollable. I 开发者_如何学编程would like to synchronize the scrolling between those two listboxes. For example, if I scroll down the first list box, then the second list box should scroll down automatically the same amount of items in such way that the options on the both the list boxes should always appear in the same row. How can I achieve this in JSF?

You can do what you want with JavaScript. I'd recommend using jQuery (or another cross-browser JS library) to save you the aggravation of writing vanilla JavaScript that works in all major browsers.

If the generated markup looks like this:

<select id="foo"><!-- snip options --></select>
<select id="bar"><!-- snip options --></select>

Then this jQuery will keep them synced:

var bar = $('#bar').get(0);

$('#foo').change(function() {
    bar.selectedIndex = this.selectedIndex;
});

Demo