从下拉表单中选择时加载页面

Load page on selection from dropdown form

本文关键字：加载 选择 表单      更新时间：2023-09-26

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

这是我所拥有的：

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

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

尝试以下操作：

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

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

我建议你开始使用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>
显然，

这里的聚会非常晚，但由于我试图弄清楚同样的事情并且能够做到，我将在这里发布如何。

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

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

相关文章：