javascript 根据选定的 <option> 动态更新表单操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17075138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically update form action based on selected <option>
提问by Kevinster
So, this is what I am trying to do.. I want a dropdown in HTML with a submit button that changes based on the value of the dropdown.
所以，这就是我想要做的。我想要一个 HTML 中的下拉列表，其中有一个提交按钮，该按钮根据下拉列表的值进行更改。
So, when I have this:
所以，当我有这个时：
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
...
</select>
What I need is a button that checks what the value is. If value = 20x30 then use URL www.example.com/20x30
我需要的是一个检查值是什么的按钮。如果值 = 20x30，则使用 URL www.example.com/20x30
If value is 30x30 then use URL www.example.com/30x30
如果值为 30x30，则使用 URL www.example.com/30x30
I am far from a PHP expert, so anyone that is able to set me off in the right direction would be a life saver :)
我远非 PHP 专家，所以任何能够让我朝着正确方向前进的人都将是一个救星:)
采纳答案by Luigi Siri
You might try this:
你可以试试这个：
Javascript:
Javascript：
function goto() {
window.location = "http://www.example.com/"+document.getElementById('select13').value;
}
HTML:
HTML：
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
<button onclick='goto()'>Go</button>
When you click on the 'GO' button it redirects to example.com/(the selected value).
当您单击“开始”按钮时，它会重定向到 example.com/（所选值）。
Here's a JSFiddlewith an exmaple.
这是一个带有示例的 JSFiddle。
EDITto fit your comment:
编辑以适合您的评论：
function goto() {
var selection = document.getElementById('select13').value;
if (selection != 'All') {
//window.location = "http://www.example.com/"+selection;
alert("http://www.example.com/" + selection);
} else {
alert("Error: You must pick something");
}
}
Also, if you want to submit a form and then do the redirection. The PHP code would be as follows:
另外，如果您想提交表单然后进行重定向。PHP 代码如下：
<?php
//Process your form without echoing anything before the header function.
if($_REQUEST['sizes'] != 'All'){
header('location:http://example.com/'.$_REQUEST['sizes']);
}
else{
header('location:http://example.com/form.php');
}
回答by Samuel Cook
some simple Javascript would suffice:
一些简单的 Javascript 就足够了：
<form id="FORM_ID" action="DEFAULT_ACTION">
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
</form>
<script type="text/javascript">
document.getElementById('select13').onchange = function(){
document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>
回答by tymeJV
You'll need an onchangeevent for your dropdown:
您onchange的下拉菜单需要一个事件：
document.getElementById("select13").onchange = function() {
var currentVal = this.value;
if (currentVal == "20x30") {
//do stuff
}
}
