Code optimization for toggling visibility

OK, so here's my problem, folks. I'm working on a site on which people can register for (x). I have a drop-down menu of states for people to select. Based on their selection of a state, I have another list of hospitals from which to choose that depends on their selection of the state. So, if you choose Hawaii, you will only see hospitals in Hawaii and not Texas, for instance. I have a function that toggles visibility based on the value of a check box, but I cannot seem to get it to work for the value of a drop-down. Any thoughts? If there is a quicker or more industry-standard way to solve it, any steering in the right direction will be greatly appreciated.

What I'm trying to use:

$(document).ready(function() 
{  $('#stateinjured').change(function()
    {  
        $('#stateinjuredky').toggle(this.checked); 
    }); 

});

<select>
<option selected="selected">Select your state</option>
    <option id="stateinjured" >Kentucky</option>
    <option>West Virginia</option>
    <option>Ohio</option>
    <option>Tennessee</option>
    </select><br/>
<select>
<option style="display:none;" id="stateinjuredky" selected=开发者_开发知识库"selected">Choose hospital you visited</option>
    <option>hospital1</option>
    <option>hospital2</option>
    <option>hospital3</option>
    </select>

---

You should look into jQuery's AJAX, it's fast and you don't need a local server to use it, you could use your web server.

look over here: http://api.jquery.com/category/ajax/

---

I think you have the id's and style on the wrong elements. You'd also need some logic to determine what was selected and then show the proper list. The code below will only show 1 select box on page load, and then depending on what is selected will show the requested list:

$(document).ready(function() 
{
    $('#stateinjured').change(function() {
        var selectedOption = $(this + "option:selected").val();
        if (selectedOption == "Kentucky") {
            $("#stateinjuredky").css("display","block");
        }
        //or you could just have the select ids be the state names, then you wouldn't need all these if...else statements
    }); 
});

Then...

<select id="stateinjured">
    <option selected="selected">Select your state</option>
    <option>Kentucky</option>
    <option>West Virginia</option>
    <option>Ohio</option>
    <option>Tennessee</option>
</select>
<br/>
<select id="stateinjuredky" style="display: none;">
    <option selected="selected">Choose hospital you visited</option>
    <option>hospital1</option>
    <option>hospital2</option>
    <option>hospital3</option>
</select>
<!-- more selects for other states -->

There are definitely more efficient ways of doing this though, as others have said.