Filter child select box value from parent using Jquery

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

<select id="parent">
 <option value="Country1">Country1</option>
 <option value="Country2">Country2</option>
 <option value="Country3">Country3</option>
</select>

<select id="child">
 <option value="Country1 state1">Country1 state1</option>
 <option value="Country1 state2">Country1 state2</option>
 <option value="Country2 state1">Country2 state1</option>
 <option value="Country2 state2">Country2 state2</option>
 <option value="Country3 state1">Country3 state1</option>
</select>

Then if i select country1 from parent selection box, the state selection box has need to show all states of country1 alone and remove all other states from it.

I need to find the child val开发者_C百科ues by partial match and verify with the parent value..

$(document).ready(function(){
 $('#parent').change(function(){
  var filter = $(this).val();
  $('option').each(function(){
   if ($('option:contains("' + var1 '")') == filter) {     
    $(this).show();
   } else {
    $(this).hide();
   }
  var var1= $('#child').val(filter);
  })
 })
})

Please help me on this.

$("#parent").change(function(){
    var filter = $(this).val();
    $("#a").append('a');
    $('select#child option').each(function(){
       $("#a").append('a');
       if ( $(this).val().substring(0,8) == filter) {     
          $(this).show();
       } 
       else {
           $(this).hide();
       }
    });

   var var1= $('#child').val(filter);
})

http://jsfiddle.net/yZm7A/3/

although as one sees there remains the problem of the selected value in the second dropdown not changing

Try IE

else {
   $(this).hide();
}

change it to

else {
   $(this).remove();
}