使用Jquery从父级筛选子选择框值

我有两个选择框，一个包含国家名称，另一个包含所有国家的所有州名称

<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>

请帮我做这个

$("#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);
})

尽管我们可以看到，第二个下拉列表中的选定值仍然存在问题，无法更改

请尝试IE

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

换成

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

---

请注意，

$（this）.val（）

绝不是

==filter

，而是以

filter

开头。因此，应该检查

$（this）.val（）.substring（0，8）=filter

检查链接的源代码选择jQuery插件。它使用类名做一些非常类似的事情。你应该能够从那里适应。

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