從下拉列表中選擇加載頁面

我正在嘗試創建一個下拉菜單，將我帶到各種網頁。現在它已經設置完畢，所以你做出選擇然後你點擊一個「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

從下拉列表中選擇加載頁面

回答

相關問題