请问一下
我现在有两个select选项
第一个select有a,b,c三项
第二个select有1,2,3,4,5,6六项
我想要在选择a时,只出现1,2两项选择
选择b时,只出现3,4两项
选择c时,只出现5,6两项
目前在网络上找了一些方法
用jquery处理data-parent跟child的部分,但不知道为什么都无法工作
将网页简化之后剩下底下内容,可以帮忙看一下哪里出了错吗?
<html lang="zh_TW" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-3.6.0.js"></script>
<script>
$(document).ready(function(){
$('#route').change(function() {
var parent = $(this).val();
$('#branch').children().each(function() {
if($(this).data('parent') != parent) {
$(this).hide();
} else $(this).show();
});
});
});
</script>
</head>
<body>
<select id="route">
<option value="a" selected="selected">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select><br />
<select id="branch">
<option data-parent="a" value="1" selected="selected">1</option>
<option data-parent="a" value="2" >2</option>
<option data-parent="b" value="3" >3</option>
<option data-parent="b" value="4" >4</option>
<option data-parent="c" value="5" >5</option>
<option data-parent="c" value="6" >6</option>
</select><br />
</body>
</html>