从下拉表单中加载页面答案

【问题标题】：Load page on selection from dropdown form从下拉表单中加载页面
【发布时间】：2012-04-27 20:39:37
【问题描述】：

我正在尝试制作一个下拉菜单，可以将我带到各种网页。现在它已设置好，因此您可以做出选择，然后点击“开始”按钮，然后它会将您带到相应的链接。我正在尝试弄清楚如何制作它，这样当您做出选择时，它会自动进行，您无需按下“开始”按钮。

这是我所拥有的：

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

任何帮助或解释链接都会很棒。谢谢！

【问题讨论】：

有没有办法提供您的原始 javascript？我正在做同样的事情。我有一个城市的下拉菜单。用户选择城市，然后必须单击“开始”按钮才能移动到另一个网页或网站（取决于选择）。我对 javascipt 不熟悉，所以如果你能分享，那就太棒了。

标签： javascript html forms input

【解决方案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>

您要查找的是“onchange”而不是“onsubmit”

【讨论】：

这种方法最好的部分是它不依赖于 JQuery，而且它非常简单，单行。通常我不喜欢内联 JS，但在这里，它很有意义。
太棒了。像魔术一样工作，它是如此简单

【解决方案2】：

在这里参加聚会显然已经很晚了，但是由于我试图弄清楚同样的事情并且能够做到，所以我会在这里发布。

其他答案是在您更改选择元素选项时加载链接，但您最初要求在做出选择后使用按钮来执行此操作。这对我有用：

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

【讨论】：

【解决方案3】：

我建议您开始使用 javascript 框架 jQuery，因为它确实会让您在使用 javascript 时变得更轻松。

当您在网页中安装和设置 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>

【讨论】：

【解决方案4】：

这样的事情可能会有所帮助 - 基本上，您只需将 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>

【讨论】：

【解决方案5】：

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

【讨论】：