web-dev-qa-db-fra.com

Charger la page sur la sélection à partir du formulaire déroulant

J'essaie de faire un menu déroulant qui me mène à diverses pages Web. En ce moment, il est configuré pour que vous fassiez votre choix, puis vous appuyez sur un bouton "Go", puis vous amène au lien approprié. J'essaie de comprendre comment faire en sorte que, lorsque vous effectuez votre sélection, la sélection disparaisse automatiquement et vous n'avez pas besoin d'appuyer sur le bouton "Go".

Voici ce que j'ai

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

Toute aide ou des liens vers des explications seraient formidables. Je vous remercie!

javascripthtmlformsinput
18
JakeIC

Essayez ce qui suit:

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

Ce que vous recherchiez, c'est "onchange" plutôt que "onsumbit"

32
jacktheripper

Découvrez 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>
2
Rodik

Quelque chose comme cela pourrait aider - en gros, vous liez simplement un événement onChange à la sélection afin que, lorsqu'une nouvelle option est sélectionnée, il transfère l'emplacement sur la page. 

<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>
1
Jonathan LeBlanc

Je vous recommanderais de commencer à utiliser le framework javascript jQuery car cela vous facilitera grandement la vie en ce qui concerne javascript.

Lorsque jQuery est installé et configuré dans votre page Web, vous devriez pouvoir faire quelque chose comme ceci:

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

Évidemment super tard pour la fête ici, mais puisque j'essayais de comprendre la même chose et que je pouvais le faire, je vais commenter ici.

Les autres réponses vous demandent de charger le lien lorsque vous modifiez votre option de sélection d'élément, mais vous aviez initialement demandé de le faire avec un bouton, après avoir effectué votre sélection. Cela a fonctionné pour moi:

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

0
Andrew Willard