Disable second dropdown menu before first is populated

Question

I need to grey out the second jump box (Select a Subcategory) before the first (Choose a Category) has a valid selection ..Here is the current code.. thanks guys

    <script type="text/javascript">

\$j(document).ready(function() {
   \$j('.subf_dropdown').html($j('.subf_dropdown').html());
});

function chooseForum(f, name) 
{
   \$j.ajax({
    url: 'index.php?autocom=cats&root=' + f,
    type: 'GET',
    timeout: 100000,
    error: function(){
        alert('Oops something went wrong. Please try again');
    },
    success: function(xml){
        \$j('.subf_dropdown').html("<optgroup label='Subcategories'> " + xml + " </optgroup>");
    }
   });

}

function newPostInForum(f) 
{
   if (f != "")
   {
      window.location = "http://www.xxx.co.za/?act=post&amp;do=new_post&amp;f=" + f;
   }
}
</script>

<select name='f' class='f_dropdown' onchange="chooseForum(this.value, this); return false;">
    <optgroup label="Choose a Category">
        {$data} 
    </optgroup>
</select>
<br /><br />
<select name='subf' class='subf_dropdown' onchange="newPostInForum(this.value); return false;">
    <optgroup label="Subcategories">
        <option value="" selected="selected">Select a Subcategory</option>

    </optgroup>
</select>

Answer 1

Keep it disabled until $.ajax's success callback fires:

<select name='subf' disabled="disabled"...

function chooseForum(f, name) 
{
    ...
    success: function(xml){
        $j('.subf_dropdown').html("<optgroup label='Subcategories'> " + xml + " </optgroup>");
        $('.subf_dropdown').removeAttr("disabled");
    }   
}