从下拉列表中选择加载页面

我正在尝试创建一个下拉菜单，将我带到各种网页。现在它已经设置完毕，所以你做出选择然后你点击一个“Go”按钮，然后它会把你带到适当的链接。我试图弄清楚如何做到这一点，当你做出选择时，它会自动进行，你不需要按“Go”按钮。从下拉列表中选择加载页面

以下是我有：

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

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

来源

2012-04-16 JakeIC

是否有提供你原来的JavaScript的方法吗？我正在处理完全相同的事情。我有一个城市下拉。用户选择城市，然后点击“开始”按钮移动到另一个网页或网站（取决于选择）。我不熟悉javascipt，所以如果你可以分享，那将会很棒。 – 2013-02-13 19:30:21

尝试以下操作：

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

来源

2012-04-16 13:59:26 jacktheripper

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

来源

2012-04-16 13:59:12 Rodik

像这样的东西可能会帮助 - 基本您只需将onChange事件绑定到select，以便在选择新选项时将它转发到页面。

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

来源

2012-04-16 14:00:52

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

来源

2012-04-16 14:01:43 Buddha

显然超级晚在这里聚会，但因为我试图找出相同事情，并能够，我会张贴如何在这里。

其他答案您可以在更改选择元素选项时加载链接，但最初请求您在做出选择后使用按钮执行此操作。这为我工作：

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

来源

2016-11-02 15:51:53

从下拉列表中选择加载页面

回答

相关问题