[問題] select option決定下一個select
請問一下
我現在有兩個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="" rel="nofollow">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>
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 211.22.200.117 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1625629719.A.C52.html
推
07/07 13:43,
3年前
, 1F
07/07 13:43, 1F
→
07/07 13:44,
3年前
, 2F
07/07 13:44, 2F
謝謝回應
我將empty加上後還是不行
又發現empty完全沒有作用
才發現src="jquery-3.6.0.js"沒發揮效果,我確定有下載放在相同資料夾了
改成網址去網頁上讀取就好了,真是奇怪,我再研究看看哪裡錯了
※ 編輯: sinlin (211.22.200.117 臺灣), 07/07/2021 14:15:28
推
07/07 16:35,
3年前
, 3F
07/07 16:35, 3F
→
07/07 16:35,
3年前
, 4F
07/07 16:35, 4F
→
07/07 16:36,
3年前
, 5F
07/07 16:36, 5F
好的, 下次會注意錯誤訊息
目前只注意瀏覽器主頁面中的waring跟error,在這個例子上是沒有出現
→
07/07 22:29,
3年前
, 6F
07/07 22:29, 6F
→
07/07 22:41,
3年前
, 7F
07/07 22:41, 7F
感謝提供另一種方法
因為我目前只會html,css跟php跟mysql所以javascript都上網去抄
約略判讀一下有沒有問題而已
上面我貼的那個也可以使用了,原因是不知道為什麼使用本機的jquery無效
連到jquery CDN就可以正常運行了
※ 編輯: sinlin (211.22.200.117 臺灣), 07/08/2021 10:16:39
推
07/08 13:29,
3年前
, 8F
07/08 13:29, 8F
推
07/14 23:29, , 9F
07/14 23:29, 9F
→
07/14 23:29, , 10F
07/14 23:29, 10F
不好意思隔了這麼多天才確認好
確認沒有載入後
發現檔名有些錯誤,所以無法正常載入
謝謝各位的幫忙
※ 編輯: sinlin (114.40.42.165 臺灣), 07/30/2021 22:04:32
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
