英文:
How to connect two dropdown menu?
问题
我试图通过使用别人的代码来重新创建一个“链接”的下拉菜单。但出于某种原因，代码没有执行。我可以选择第一个下拉菜单，但它对第二个下拉菜单没有任何影响。
我在JFiddle上粘贴了代码到相关部分，它起作用了！
所以我有点迷茫。
谢谢你的建议！
英文:
I am trying to recreate a "linked" drop down menu by using someone else's code. But for some reason the code isn't executing. I can select the first drop down but it does nothing to the second one.
I use JFiddle and paste code into relevant sections and it worked!
So I am a little lost.
Thank you for your advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<style type="text/css">
.subcat option {
display: none;
}
.subcat option.label {
display: inline;
}
</style>
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('store').value;
console.log(url);
if(url != 'none') {
window.location = url;
}
}
</script>
<script type="text/javascript">
$(function(){
var $cat = $("#state"),
$subcat = $(".subcat");
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
});
});
</script>
<form id="formname" name="Sate-Store">
<select name="state" id="state">
<option value="">Select state</option>
<option value="ma">MA</option>
<option value="me">ME</option>
<option value="nh">NH</option>
</select>
<select disabled="disabled" class="subcat" id="store" name="store">
<option value>Select a store</option>
<!-- MA -->
<option rel="ma" value="ma_store_1">MA Store 1</option>
<option rel="ma" value="http://www.google.com">MA Store 2</option>
<option rel="ma" value="ma_store_3">MA Store 3</option>
<option rel="ma" value="ma_store_4">MA Store 4</option>
<option rel="ma" value="ma_store_5">MA Store 5</option>
<!-- ME -->
<option rel="me" value="me_store_1">ME Store 1</option>
<option rel="me" value="me_store_2">ME Store 2</option>
<option rel="me" value="me_store_3">ME Store 3</option>
<option rel="me" value="me_store_4">ME Store 4</option>
<option rel="me" value="me_store_5">ME Store 5</option>
<!-- MH -->
<option rel="nh" value="nh_store_1">NH Store 1</option>
<option rel="nh" value="nh_store_2">NH Store 2</option>
<option rel="nh" value="nh_store_3">NH Store 3</option>
<option rel="nh" value="nh_store_4">NH Store 4</option>
<option rel="nh" value="nh_store_5">NH Store 5</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
</body>
</html>
Tried using JFiddle - it worked
答案1
得分: 0
我已测试过你的代码。它在JSFiddle上可以运行，但在纯HTML中无法工作。问题在于jquery.js无法加载。
你可以将该库从以下位置更改为：
//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js
改为：
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js
英文:
I have tested your code. It works on JSFiddle but does not work in plain HTML. The problem is jquery.js failed to load.
you can change that library from
//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js
to
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论