提交时加载 url 的下拉表单答案

【问题标题】：Drop down forms that when submitted load url提交时加载 url 的下拉表单
【发布时间】：2012-08-11 12:45:31
【问题描述】：

I am trying to make a basic drop down forum which when options are selected they will load a URL on a submit button click.

我想要这样的东西

下拉一个

自行车品牌：电动车宝马等等

自行车型号：（如果上面选择了 ktm 会显示） 990 EXC 等等

（如果上面选择的宝马会显示） GS 冒险等等

所以如果自行车的品牌是 ktm 并且型号是 990，点击提交按钮就会加载 www.website.com/ktm/990

这是我拥有的代码，我已经对拣选部分进行了排序，所以如果您选择 KTM，它会向您显示 KTM 的型号，并且与 BMW 相同，唯一的问题是我根本无法让 url 正常工作并且没有真正的想法怎么做。

<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>

【问题讨论】：

标签： javascript forms url

【解决方案1】：

将此函数添加到您的脚本中

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();">

【讨论】：

【解决方案2】：

您可以使用所选选项的简单连接创建 URL，并通过在按钮单击处理程序中设置 location = "<new URL>" 重定向到所选页面：

onclick="location='http://www.website.com/' + myform.bike.options[myform.bike.selectedIndex].value + '/' + myform.model.options[myform.model.selectedIndex].value;"

如果您需要有效的解决方案，请告诉我。

您还应该检查以确保用户在允许单击按钮之前已在自行车下拉列表中选择了某些内容。否则 URL 将无效。

编辑：这是一个显示完整解决方案的 JSFiddle：http://jsfiddle.net/V8jPn/1/

【讨论】：