請問一下
我現在有兩個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>