带有转到 url 按钮的相关下拉列表
Dependent Dropdown lists with go to url button
尝试创建两个下拉列表,其中第二个下拉列表依赖于第一个,第二个包含 URL 值,带有转到 URL 的转到按钮。例如 - 从几个州的列表中选择,然后从所选州的几个城市列表中选择(在选择州之前无法选择),然后点击提交按钮转到 URL那个城市的页面。最好没有JQuery。我试了一下,第 2 个 "MA" 商店转到 url,但 url 部分不起作用。任何帮助,将不胜感激。谢谢! https://jsfiddle.net/mkallis/xws1ykto/67/
<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);
});
});
function goToNewPage()
{
var url = document.getElementById('store').value;
if(url != 'none') {
window.location = url;
}
}
</script>
<style type="text/css">
.subcat option {
display: none;
}
.subcat option.label {
display: inline;
}
</style>
<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>
这里的问题可能与 when/how JSFiddle 注入您在 js 部分定义的脚本有关。打开控制台,然后单击提交,它说该函数未定义,这意味着在创建提交按钮时它不知道该函数是什么。
为了证明这一点,我将该函数的定义移动到 html,在提交按钮之前并且它起作用了。
<script> function yourfunction(){} </script>
<form>
<!-- yourfunction guaranteed to be defined here -->
<button onclick="yourfunction()"></button>
</form>
尝试创建两个下拉列表,其中第二个下拉列表依赖于第一个,第二个包含 URL 值,带有转到 URL 的转到按钮。例如 - 从几个州的列表中选择,然后从所选州的几个城市列表中选择(在选择州之前无法选择),然后点击提交按钮转到 URL那个城市的页面。最好没有JQuery。我试了一下,第 2 个 "MA" 商店转到 url,但 url 部分不起作用。任何帮助,将不胜感激。谢谢! https://jsfiddle.net/mkallis/xws1ykto/67/
<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);
});
});
function goToNewPage()
{
var url = document.getElementById('store').value;
if(url != 'none') {
window.location = url;
}
}
</script>
<style type="text/css">
.subcat option {
display: none;
}
.subcat option.label {
display: inline;
}
</style>
<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>
这里的问题可能与 when/how JSFiddle 注入您在 js 部分定义的脚本有关。打开控制台,然后单击提交,它说该函数未定义,这意味着在创建提交按钮时它不知道该函数是什么。
为了证明这一点,我将该函数的定义移动到 html,在提交按钮之前并且它起作用了。
<script> function yourfunction(){} </script>
<form>
<!-- yourfunction guaranteed to be defined here -->
<button onclick="yourfunction()"></button>
</form>