Question

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

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

然后，如果我从父选择框中选择country1，则状态选择框需要单独显示country1的所有状态，并从中删除所有其他状态。

我需要通过部分匹配找到子值并使用父值验证..

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

请帮我解决这个问题。

Answer 1

$("#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/

虽然人们看到第二个下拉列表中的选定值仍然没有改变

Answer 2

尝试IE

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

将其更改为

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

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

2 个答案: