Tải trang trên lựa chọn từ biểu mẫu thả xuống

Question

Tôi đang cố gắng tạo một trình đơn thả xuống đưa tôi đến các trang web khác nhau. Ngay bây giờ nó được thiết lập để bạn thực hiện lựa chọn của bạn và sau đó bạn nhấn một nút "Go" và sau đó nó sẽ đưa bạn đến liên kết thích hợp. Tôi đang cố gắng tìm ra cách để làm cho nó như vậy khi bạn thực hiện lựa chọn của bạn nó sẽ tự động đi và bạn không cần phải đẩy nút "Go".

Dưới đây là những gì tôi có:

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

Bất kỳ trợ giúp hoặc liên kết đến lời giải thích sẽ là tuyệt vời. Cảm ơn bạn!

Answer 1

Hãy thử như sau:

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

gì bạn đang tìm kiếm là 'onchange' thay vì 'onsumbit'

Answer 2

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

Answer 3

Something như thế này có thể giúp - về cơ bản bạn chỉ cần gắn một sự kiện onChange vào lựa chọn sao cho khi một tùy chọn mới được chọn, nó sẽ chuyển tiếp vị trí đến trang.

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

Answer 4

Tôi khuyên bạn nên bắt đầu sử dụng khung javascript jQuery vì nó thực sự sẽ làm cho cuộc sống của bạn dễ dàng hơn nhiều khi nói đến javascript.

Khi bạn có jQuery cài đặt và thiết lập trong bạn trang web mà bạn sẽ có thể làm điều gì đó như thế này:

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

Answer 5

Rõ ràng siêu muộn để bên đây, nhưng kể từ khi tôi đã cố gắng tìm ra giống nhau và có thể, tôi sẽ đăng bài như thế nào ở đây.

Các câu trả lời khác có bạn tải liên kết khi bạn thay đổi tùy chọn phần tử lựa chọn của mình, nhưng ban đầu bạn đã yêu cầu làm điều đó bằng một nút, sau khi thực hiện lựa chọn của bạn. Điều này làm việc cho tôi:

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