One of the biggest problems in web UI is to synchronize page elements one upon each other, but by far the hardest is when dealing with multiple dropdowns. A good, clean User Interface is the key to your customer’s heart! This can be achieved in several ways, such as:

• on the change of the first dropdown, a new page request is issued to the server, with the selected item as current item and the server will figure out which element(s) need to be selected in the subsequent synchronized dropdowns – old style, not so used anymore because it takes time and bandwidth to send and receive the complete page;
• with AJAX – on the change of the first dropdown, a partial page request is issued to the server, with the selected item as current item; the server will figure out which element(s) need to be selected in the subsequent synchronized dropdowns; it returns just the relevant part of the page ( not a complete one like before); just this new part of the page will be overridden in the current page, creating the user the impression of “real time” action.
• with jQuery, moving the logic of synchronization to the client side – the advantage is no bandwidth/time consumption, but a huge disadvantage is that the client (the browser) might have Javascript disabled. This concern, although low, might make your page not to work as expected.

Today’s choice – jQuery

We’ll explore today the last option, using jQuery. For this we will consider two dropdowns, each one with 3 items. Our target will be simple today, we’ll change the second dropdown to reflect the first one’s selection. Let’s consider that our page contains the following fragment of code with these two dropdown boxes, first one containing the countries and the second their capital. Our target is to automatically help users with the input of the data in a registration form, for example:

<select id="ddCountry">
  <option value="1">Romania</option>
  <option value="2">Italy</option>
  <option value="3">Germany</option>
</select>

<select id="ddCapital">
  <option value="1">Bucharest</option>
  <option value="2">Rome</option>
<option value="3">Berlin</option> </select>

For this examples to work, I make the following assumptions:

1. you only use jQuery framework in your application – otherwise, you have to change my scripts to the safe side;
2. you have a small experience with HTML, JavaScript and jQuery.

To reach our goal and make our customers happy, there are several ways. The first manipulates the dom, directly setting the selectedIndex of the dropdown to the value of the country – simple, effective! The second example goes deeper, cleans the code and make it crisper – you should always write less, your time is valuable! The third is a beginner example, doing all in simple steps – easy for anyone who wants to start with jQuery. First, it extracts the index of the first dropdown in a variable and then it applys it to the second dropdown.

1. jQuery – the fast way

$(function() {
    $("#ddCountry").change(function() {
        $("#ddCapital")[0].selectedIndex = $(this)[0].selectedIndex;
    });
});​

2. jQuery – the elegant way

$("#ddCountry").change(function(){
   $("#ddCapital").val( this.value );
});

3. jQuery – the intricate way – shown only as example, better use the elegant way

$('#ddCountry').change(function(){
   var index = $(this).find('option:selected').index();
   $('#ddCapital option').eq(index).prop('selected', true);
});