作者sinlin (豆漿)
看板Web_Design
標題[問題] select option決定下一個select
時間Wed Jul 7 11:48:37 2021
請問一下
我現在有兩個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>
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 211.22.200.117 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1625629719.A.C52.html
推 nick8195: 或許是因為不同瀏覽器對於option display:none處理不同? 07/07 13:43
→ nick8195: 可以試試每次都將#branch.empty() 並重新append新的選項 07/07 13:44
謝謝回應
我將empty加上後還是不行
又發現empty完全沒有作用
才發現src="jquery-3.6.0.js"沒發揮效果,我確定有下載放在相同資料夾了
改成網址去網頁上讀取就好了,真是奇怪,我再研究看看哪裡錯了
※ 編輯: sinlin (211.22.200.117 臺灣), 07/07/2021 14:15:28
推 rahit: .each不要用 07/07 16:35
→ rahit: 有的瀏覽器不支援 07/07 16:35
→ rahit: 如果有錯誤訊息麻煩貼一下比較好判讀 07/07 16:36
好的, 下次會注意錯誤訊息
目前只注意瀏覽器主頁面中的waring跟error,在這個例子上是沒有出現
→ Rplus: 直接寫個 fn 來更新 2nd select options 就好 07/07 22:29
感謝提供另一種方法
因為我目前只會html,css跟php跟mysql所以javascript都上網去抄
約略判讀一下有沒有問題而已
上面我貼的那個也可以使用了,原因是不知道為什麼使用本機的jquery無效
連到jquery CDN就可以正常運行了
※ 編輯: sinlin (211.22.200.117 臺灣), 07/08/2021 10:16:39
推 rahit: 有可能你jquery位址指錯 07/08 13:29
推 chen5252: 本機有確認正常載入jq嗎？有的話再從CDN下載一份蓋掉原 07/14 23:29
→ chen5252: 本的，清掉cache之後再試一次？ 07/14 23:29
不好意思隔了這麼多天才確認好
確認沒有載入後
發現檔名有些錯誤,所以無法正常載入
謝謝各位的幫忙
※ 編輯: sinlin (114.40.42.165 臺灣), 07/30/2021 22:04:32