从下拉菜单中选择表单页面加载(Load page on selection from dropdow

我试图做一个下拉菜单中带我到各种网页。 现在它被设定为使您做出选择，然后你打了一个“开始”按钮，然后它把你带到相应的链接。 我试图找出如何使它所以当你做出选择，它会自动进入你不需要按“转到”按钮。

以下是我有：

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

任何帮助或链接的解释将是巨大的。 谢谢！

Answer 1:

尝试以下方法：

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

什么你要找的是“平变化”，而不是“onsumbit”

Answer 2:

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

Answer 3:

像这样的东西可能会帮助 - 基本上你只是领带结的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>

Answer 4:

我建议你开始使用JavaScript框架jQuery的 ，因为它确实会让你的生活更容易，当涉及到的JavaScript。

当您已安装jQuery和你的web页面设置，你应该能够做这样的事情：

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

Answer 5:

显然，超级晚在这里聚会，但因为我试图找出同样的事情，是可以的，我会在这里发布方式。

其他答案有当你改变你的选择元素选项加载的链接，但您最初曾要求用一个按钮去做，做出选择之后。 这为我工作：

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

文章来源: Load page on selection from dropdown form