Загрузка страницы по выбору из раскрывающегося списка

Я пытаюсь создать раскрывающееся меню, которое приведет меня к различным веб-страницам. Сейчас он настроен таким образом, что вы делаете свой выбор, а затем вы нажимаете кнопку "Перейти", а затем переходите к соответствующей ссылке. Я пытаюсь понять, как это сделать, когда вы делаете свой выбор автоматически, и вам не нужно нажимать кнопку "Перейти".

Вот что у меня есть:

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

Любая помощь или ссылки на объяснения были бы замечательными. Спасибо!

ОТВЕТЫ

Ответ 1

Попробуйте следующее:

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

Ответ 2

Отъезд 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>

Ответ 3

Что-то вроде этого может помочь - в основном вы просто привязываете событие 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>

Ответ 4

Я бы порекомендовал вам начать использовать фреймворк javacript 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>

Ответ 5

Очевидно, очень поздно, чтобы вечеринка здесь, но так как я пытался выяснить то же самое и смог, я опубликую, как здесь.

В других ответах вы загружаете ссылку, когда вы меняете опцию выбранного элемента, но вы изначально попросили сделать это с помощью кнопки после выбора. Это сработало для меня:

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