作者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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1625629719.A.C52.html
1F：推 nick8195: 或许是因为不同浏览器对於option display:none处理不同? 07/07 13:43
2F：→ 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
3F：推 rahit: .each不要用 07/07 16:35
4F：→ rahit: 有的浏览器不支援 07/07 16:35
5F：→ rahit: 如果有错误讯息麻烦贴一下比较好判读 07/07 16:36
好的, 下次会注意错误讯息
目前只注意浏览器主页面中的waring跟error,在这个例子上是没有出现
6F：→ 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
8F：推 rahit: 有可能你jquery位址指错 07/08 13:29
9F：推 chen5252: 本机有确认正常载入jq吗？有的话再从CDN下载一份盖掉原 07/14 23:29
10F：→ chen5252: 本的，清掉cache之後再试一次？ 07/14 23:29
不好意思隔了这麽多天才确认好
确认没有载入後
发现档名有些错误,所以无法正常载入
谢谢各位的帮忙
※ 编辑: sinlin (114.40.42.165 台湾), 07/30/2021 22:04:32