[問題] select option決定下一個select

看板Web_Design作者 (豆漿)時間2年前 (2021/07/07 11:48), 2年前編輯推噓3(305)
留言8則, 3人參與, 2年前最新討論串1/1
請問一下 我現在有兩個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, 2年前 , 1F
或許是因為不同瀏覽器對於option display:none處理不同?
07/07 13:43, 1F

07/07 13:44, 2年前 , 2F
可以試試每次都將#branch.empty() 並重新append新的選項
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, 2年前 , 3F
.each不要用
07/07 16:35, 3F

07/07 16:35, 2年前 , 4F
有的瀏覽器不支援
07/07 16:35, 4F

07/07 16:36, 2年前 , 5F
如果有錯誤訊息麻煩貼一下比較好判讀
07/07 16:36, 5F
好的, 下次會注意錯誤訊息 目前只注意瀏覽器主頁面中的waring跟error,在這個例子上是沒有出現

07/07 22:29, 2年前 , 6F
直接寫個 fn 來更新 2nd select options 就好
07/07 22:29, 6F

07/07 22:41, 2年前 , 7F
感謝提供另一種方法 因為我目前只會html,css跟php跟mysql所以javascript都上網去抄 約略判讀一下有沒有問題而已 上面我貼的那個也可以使用了,原因是不知道為什麼使用本機的jquery無效 連到jquery CDN就可以正常運行了 ※ 編輯: sinlin (211.22.200.117 臺灣), 07/08/2021 10:16:39

07/08 13:29, 2年前 , 8F
有可能你jquery位址指錯
07/08 13:29, 8F
文章代碼(AID): #1WvIGNnI (Web_Design)