web-dev-qa-db-fra.com

Liens dans les options du menu déroulant <select>

Est-il possible pour chaque option de liste déroulante de se lier quelque part une fois sélectionné sans avoir besoin d'un bouton externe?

<select>
  <option value="x">x</option>
  <option value="y">y</option>
</select>
javascripthtmlselectdrop-down-menu
33
Sebastian

Vous pouvez utiliser la propriété onChange. Quelque chose comme:

<select onChange="window.location.href=this.value">
    <option value="www.google.com">A</option>
    <option value="www.aol.com">B</option>
</select>
77
Kevin

Ajouter un gestionnaire d'événements onchange et définir l'emplacement des pages sur la valeur

<select id="foo">
    <option value="">Pick a site</option>
    <option value="http://www.google.com">x</option>
    <option value="http://www.yahoo.com">y</option>
</select>

<script>
    document.getElementById("foo").onchange = function() {
        if (this.selectedIndex!==0) {
            window.location.href = this.value;
        }        
    };
</script>
35
epascarello

... ou si vous voulez/devez conserver votre option 'valeur' ​​telle qu'elle était, ajoutez simplement un nouvel attribut:

<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>

<script>
document.getElementById('my_selection').onchange = function() {
    window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
8
Mark

Cela aidera peut-être:

<select onchange="location = this.value;">
 <option value="home.html">Home</option>
 <option value="contact.html">Contact</option>
 <option value="about.html">About</option>
</select>
1
Zub

C'est une vieille question, je sais mais pour 2019 peeps:

Comme ci-dessus, si vous souhaitez simplement modifier l'URL, vous pouvez le faire:

<select onChange="window.location.href=this.value">
    <option value="www.google.com">A</option>
    <option value="www.aol.com">B</option>
</select>

Mais si vous voulez qu'il agisse comme une balise et que vous puissiez ainsi utiliser "./page", "#bottom" Ou "?a=567", Utilisez window.location.replace()

<select onChange="window.location.redirect(this.value)">
    <option value="..">back</option>
    <option value="./list">list</option>
    <option value="#bottom">bottom</option>
</select>

PS Désolé si le formatage est bizarre, je suis nouveau à la syntaxe Stack Overflows

0
Oliver Simmons