filter select box options using jquery

I have two selection boxes,one contains different country names and another contains all state names of all countries.

Then if i select India from coun开发者_C百科try selection box, the state selection box has need to show all states of India alone and remove all other states from it.

I need to do this in JQuery, any one is there to guide me!!!!!

Create an array of states under array of countries, and onchange event append it to the states.

<script>


var states = [];

states['India'] = ["state 1", "state 1", "state 1"];



states['China'] = ["state 2", "state 2", "state 3"];


$(document).ready(function (){


    $('#country').change(
        function(){

            var temp = states[$(this).val()];

            $('#states').children().remove();

            for(var j=0; j<temp.length; j++){

                $('<option></option>').html(temp[j]).appendTo($('#states'));

            }

        }       
    )


})


</script>

<select id="country">
    <option id="India">India</option>
    <option id="Nepal">Nepal</option>       
    <option id="China">China</option>       
    <option id="Mongolia">Mongolia</option>             
    <option id="Russia">Russia</option>                     
</select>   

<select id="states">
    <option>null</option>
</select>

U better use different way

make two select box one is for country and another for state ( default disable) when usee select country from first select box then get all state of that country via ajax in second select box..

that will be better way instead of upload all state together and then filter