Javascript 提交时加载url的下拉表单
我试图使一个基本的下拉式论坛,当选项被选中时,他们将加载一个提交按钮点击网址 我想要这样的 放下一个 自行车品牌: KTM 宝马 Ect 自行车型号: (如果在上面选择ktm,则会显示) 990 EXC Ect (如果上面选择的宝马会显示) GS 冒险 Ect 所以,若自行车品牌是ktm,型号是990,点击提交按钮就会加载 Www.website.com/ktm/990 这是我的代码,我已经得到了挑选的部分排序,所以如果你选择KTM,它会显示你的KTM模型和宝马一样,唯一的问题是我不能得到的网址工作,在所有和没有真正的想法如何做Javascript 提交时加载url的下拉表单,javascript,forms,url,Javascript,Forms,Url,我试图使一个基本的下拉式论坛,当选项被选中时,他们将加载一个提交按钮点击网址 我想要这样的 放下一个 自行车品牌: KTM 宝马 Ect 自行车型号: (如果在上面选择ktm,则会显示) 990 EXC Ect (如果上面选择的宝马会显示) GS 冒险 Ect 所以,若自行车品牌是ktm,型号是990,点击提交按钮就会加载 Www.website.com/ktm/990 这是我的代码,我已经得到了挑选的部分排序,所以如果你选择KTM,它会显示你的KTM模型和宝马一样,唯一的问题是我不能得到的网址
<script language="javascript" type="text/javascript">
<!--
function setOptions(chosen) {
var selbox = document.myform.model;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
}
if (chosen == "BMW") {
selbox.options[selbox.options.length] = new
Option('R1200-GS-Adventure','R1200-GS-Adventure');
selbox.options[selbox.options.length] = new
Option('R1200-GS','R1200-GS');
selbox.options[selbox.options.length] = new
Option('R1200-RT','R1200-RT');
selbox.options[selbox.options.length] = new
Option('1150-GS-Adventure','1150-GS-Adventure');
selbox.options[selbox.options.length] = new
Option('1150-GS','1150-GS');
}
if (chosen == "KTM") {
selbox.options[selbox.options.length] = new
Option('990','990');
selbox.options[selbox.options.length] = new
Option('640','640');
}
if (chosen == "Yamaha") {
selbox.options[selbox.options.length] = new
Option('Tenére 660XT','Tenére 660XT');
selbox.options[selbox.options.length] = new
Option('Super Tenére 1200XT','Super Tenére 1200XT');
}
}
// -->
</script>
以及表格代码
<form name="myform"><div align="center">
<select name="bike" size="1"
onchange="setOptions(document.myform.bike.options[document.myform.bike.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="BMW">BMW</option>
<option value="KTM">KTM</option>
<option value="Yamaha">Yamaha</option>
</select><br> <br>
<select name="model" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Search"
onclick="alert(document.myform.model.options[document.myform.model.selectedIndex].value);">
</div></form>
宝马
KTM
雅马哈
请先选择上面的选项之一
您可以使用所选选项的简单连接创建URL,并通过在按钮单击处理程序中设置location=”“
重定向到所选页面:
onclick="location='http://www.website.com/' + myform.bike.options[myform.bike.selectedIndex].value + '/' + myform.model.options[myform.model.selectedIndex].value;"
如果您需要有效的解决方案,请告诉我
您还应该进行检查,以确保用户在允许单击按钮之前已在“自行车”下拉列表中选择了某些内容。否则,URL将无效
编辑:下面是一个JSFIDLE,显示了完整的解决方案:将此函数添加到脚本中 Javascript:
function loadURL(){
var bike = document.myform.bike.options[document.myform.bike.selectedIndex].value;
var model = document.myform.model.options[document.myform.model.selectedIndex].value;
if(bike != ' ' && model != ' '){
var url = 'http://YOURWEBSITE.com/' + bike + '/' + model;
window.location = url;
}//if
}
并将此作为您的提交按钮
HTML
<input type="button" name="go" value="Search" onclick="loadURL();">