Hiding subsequent dropdown lists (jQuery)

Say I got 4 dropdownlists to which I load/clear data as the one of them change:

Countries
Regions
Cities
Suburbs.

When the form load, only Countries are populate with data, the rest are hidden. (ok)
When Countries change, Regions are shown, data are loaded.
And so on.
When all are populated, and say Countries change, Regions are loaded with data, Cities and Suburbs cleared and hidden.
(I think you get the picture).

Following is what I got now, but it comes down to be able to determine the next dropdownlist of "this" and the one's following that (the first to be loaded with data, the rest to be cleared/hidden).
I only pasted the first one. The rest (one for region change, one for city change are the same, just with less being cleared and hidden.)
Note this works fine. I just want some expert advice on how to refactor it into something .... simpler / less code / less duplication)

Code:

---

  <script type="text/javascript">
        $(function () {

            // hide all empty dropdowns when the form load
            // TODO: how to select dropdowns that are empty?
            $("select#RegionId").hide();
            $("select#CityId").hide();
            $("select#SuburbId").hide();

            $("select#CountryId").change(function () {
               
                // clear and hide dropdowns that will not be used now
                // TODO: there's a way to modify the selection after remove and call hide...no?
                $("select#CityId>option").remove();
                $("select#CityId").hide();
                $("select#SuburbId>option").remove().hide();
                $("select#SuburbId").hide();
               
                // also hide the region list while getting the data
                $("select#RegionId>option").remove();
                $("select#RegionId").hide();
               
                var countryId = $(this).val();
                var urlAction = "/Shared/CountryRegionsSelectList/" + countryId;
                $.getJSON(urlAction, { countryId: countryId }, function (data) {
                    $("#RegionId").addItems(data.d).show();
                });               
            });
      ...............  rest are similiar

---

Don't know if this is the best approach yet, but some thoughts...

Instead of using .hide() many times, I'd add a class to the first one, then select all except that one, and hide:

Code:

---

$("select").not(".first").hide();

---

You could also write that like this...

Code:

---

$("select:not(.first)").hide();

---

...but there's another rationale for doing it the first way. You can assign event handlers to an object, as well as use "immediate" actions (like show() and hide()) on one line of jQuery, like so:

Code:

---

$("select").change(function(){
  alert("hi!");
}).not(".first").hide();

---

On page load, this will immediately hide all select elements except the one with class="first", but it will not alert "hi!" until the change event is fired.

Next, it's often a good idea to identify your elements by DOM location, rather than by a specific ID, so that you can reduce the number of frivolous IDs in your markup, and so that your JS is still functional if an ID changes. How you use jQuery to find elements will depend on how your markup is set up, so this may not work for you, but if you have all selects on the same DOM level, you could make use of next():

Code:

---

$(this).next("select").empty().append("<option value=\"4\">Option 4</option><option value=\"5\">Option 5</option>").show();

---

Assuming this was put inside an event handler, it would get the next <select> element, empty out its contents, then append some new options, then make it visible. You would want to replace the contents of append() with whatever you got back from your AJAX call instead. Also, while this takes care of showing the next <select> when one is changed, you still need to take care of hiding them if the first one is changed. So, here is my complete example:

Code:

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
  $("select").change(function(){
    if($(this).attr("class") == "first"){
      $(this).nextAll("select").hide();
    }
    //get the options to append via AJAX - put this part inside a callback function:
    $(this).next("select").empty().append("<option value=\"4\">Option 4</option><option value=\"5\">Option 5</option>").show();
 
  }).not(".first").hide();
 
});   
</script>

<select name="select1" class="first">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
</select>

<select name="select2">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
</select>

<select name="select3">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
</select>

<select name="select4">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
</select>

---

As said, I don't know for sure if this is "the best," but it trims down the script a bit.

Thanks Sam. Got a bit of that implemented and did reduce the code with quite a few lines.