Javascript 从下拉表单中选择加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10175445/
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
Load page on selection from dropdown form
提问by JakeIC
I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
我正在尝试制作一个下拉菜单，将我带到各种网页。现在它已设置好，因此您可以进行选择，然后点击“开始”按钮，然后它会将您带到适当的链接。我试图弄清楚如何制作它，以便在您进行选择时它会自动运行，而您无需按下“开始”按钮。
Here is what I have:
这是我所拥有的：
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!
任何帮助或解释链接都会很棒。谢谢！
回答by Hymantheripper
Try the following:
请尝试以下操作：
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>?
What you were looking for was 'onchange' instead of 'onsubmit'
你要找的是“onchange”而不是“onsubmit”
回答by Rodik
Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
回答by Jonathan LeBlanc
Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
像这样的事情可能会有所帮助 - 基本上，您只需将 onChange 事件绑定到选择，以便在选择新选项时将位置转发到页面。
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
回答by Buddha
I would recommend that you start using the javascript framework jQueryas it really will make your life much easier when it comes to javascript.
我建议您开始使用 javascript 框架jQuery，因为它确实会让您在使用 javascript 时更轻松。
When you have jQuery installed and setup in you web page you should be able to do something like this:
当您在网页中安装并设置了 jQuery 后，您应该能够执行以下操作：
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
回答by Andrew Willard
Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
显然这里的聚会超级迟到了，但是由于我试图弄清楚同样的事情并且能够做到，我将在此处发布方法。
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
其他答案让您在更改选择元素选项时加载链接，但您最初要求在选择后使用按钮执行此操作。这对我有用：
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>