运行代码可以在这里找到： http://jsfiddle.net/rwdengmz/
我很抱歉，因为我无法清楚地解释我的问题，但在这里。例如：当我单击父项 1 时，它会正确显示它存在于子项中的值，即
- 父级 1 中的子项 1
- 父母 1 中的子项 2
但是，这工作正常，问题在于当我将父选项更改为示例，父2时。然后，它将再次显示正确的子值
- 父母 2 中的子项 1
- 父母 2 的孩子 2
但是，在打开下拉列表之前，它将显示上一个子值，对于此实例，它将显示父项 1 中的子值 1。
如何使其仅显示所选父选项的特定子值？
<select id="parent">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
<option value="3">Parent 3</option>
</select>
<select id="child">
<option data-parentid="1">Child 1 from Parent 1</option>
<option data-parentid="1">Child 2 from Parent 1</option>
<option data-parentid="2">Child 1 from Parent 2</option>
<option data-parentid="2">Child 2 from Parent 2</option>
<option data-parentid="3">Child 1 from Parent 3</option>
<option data-parentid="3">Child 2 from Parent 3</option>
</select>
$("#parent").on("change", function()
{
var id = $(this).val();
$("#child option").each(function()
{
$(this).css("display", ($(this).data("parentid") == id ? "" : "none"));
});
}).trigger("change");
您
需要做的就是将attr设置为 selected 。这应该可以帮助您解决以下问题：尽管调用了change函数并根据需要填充了该选项，但仍会显示以前的值。
$("#parent").on("change", function(){
$('#child option').filter(function(){
if($(this).data('parentid') == $('#parent').val()) {
$(this).show().attr('selected','true');
}
else {
$(this).hide();
}
});
});
查看小提琴
试试这段代码
$("#parent").on("change", function()
{
var id = $(this).val();
$("#child").children('option').hide();
$("select#child option[data-parentid="+id+"]").show().prop("selected", true);
}).trigger('change');