使用選擇標籤作爲導航到其他頁面？

Question

我需要從下拉選擇標記中對本網站進行導航工作。我意識到這將涉及一個jQuery。這是我的HTML的外觀至今：

<div id="top_nav"> 
<select> 
<option value="">1</option> 
<option value="">2</option> 
<option value="">3</option> 
<option value="">4</option> 
<option value="">5</option> 
<option value="">Contact</option> 
</select> 

因此，當用戶選擇2爲例，它需要他們到現場的第2頁。任何幫助，非常感謝。基於

感謝 安吉拉

Answer 1

如果您在您的網頁上使用jQuery，你可以做這樣的：

<div id="top_nav"> 
    <select> 
     <option value="page1.html">1</option> 
     <option value="page2.html">2</option> 
     <option value="page3.html">3</option> 
     <option value="page4.html">4</option> 
     <option value="page5.html">5</option> 
     <option value="contact.html">Contact</option> 
    </select> 
</div> 

$('#top_nav select').change(function(){ 
    window.location = $(this).val(); 
}); 

Answer 2

<select id="selectId " onChange="redirect()"> 
<option value="">1</option> 
<option value="">2</option> 
<option value="">3</option> 
<option value="">4</option> 
<option value="">5</option> 
<option value="">Contact</option> 
</select> 


    function redirect() 
    { 
    window.location.href=$('#selectId :selected').text()"+.html"; 
    } 

如果是值，則使用

window.location.href=$('#selectId').val()"+.html"; 

Answer 3

以及那裏有不止一種方法。您可以使用.html()或.val() html爲<option>here</option>。和Val爲<option value="here"></option>

$('select','#top_nav').change(function(){ 
    document.location=$('select','#top_nav').html()+'.html'; 
});