Onchange ouvrir l'URL via select - jQuery

Question

Quel serait le meilleur moyen d'attacher un événement afin de changer d'une option de sélection une URL. Stocker le href dans un attr et le saisir sur le changement?

Answer 1

Vérifiez cet échantillon:

 <select id="dynamic_select">
    <option value="" selected>Pick a Website</option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.youtube.com/">YouTube</option>
    <option value="http://www.stackoverflow.com/">Stack Overflow</option>
</select>

<script>
    $(function(){
      // bind change event to select
      $('#dynamic_select').bind('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>
 

.

Remarques:

• La question spécifie déjà jQuery. Donc, je garde d'autres alternatives en dehors de cela.
• Veuillez noter que dans les versions récentes de jQuery (1.7+), vous souhaiterez peut-être même remplacer bind par on .

http://gurustop.net

Answer 2

Je pense que c'est le moyen le plus simple:

 <select onchange="if (this.value) window.location.href=this.value">
    <option value="">Pick one:</option>
    <option value="/foo">Foo</option>
    <option value="/bar">Bar</option>
</select>
 

Answer 3

Désolé, mais il y a trop de codage ici ...

Je vais vous donner le plus simple gratuitement. Je l'ai inventé en 2005, bien que la source javascript dise maintenant que ce sont leurs employés qui l'ont inventé - plus d'un an plus tard!

Quoi qu'il en soit, la voici, pas de javascript !!!

 <!-- Paste this code into the BODY section of your HTML document  -->
<select size="1" name="jumpit" onchange="document.location.href=this.value"> 
<option selected value="">Make a Selection</option>
<option value="http://www.javascriptsource.com/">The JavaScript Source</option>
<option value="http://www.javascript.com">JavaScript.com</option>
<option value="http://www.webdeveloper.com/forum/forumdisplay.php?f=3">JavaScript Forums</option>
<option value="http://www.scriptsearch.com/">Script Search</option>
<option value="http://www.webreference.com/programming/javascript/diaries/">The JavaScript Diaries</option>
</select> 
 

Il suffit de taper n'importe quelle URL ou une URL relative (à l'emplacement des pages sur le serveur), cela fonctionnera toujours.

Answer 4

Vous pouvez utiliser cet extrait de code simple à l'aide de jQuery pour rediriger vos tâches à partir d'un menu déroulant.

 <select id="dynamic-select">
    <option value="" selected>Pick a Website</option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.youtube.com/">YouTube</option>
    <option value="http://www.stackoverflow.com/">Stack Overflow</option>
</select>

<script>
    $('#dynamic-select').bind('change', function () { // bind change event to select
        var url = $(this).val(); // get selected value
        if (url != '') { // require a URL
            window.location = url; // redirect
        }
        return false;
    });
</script>
 

Answer 5

Exemple JS Fiddle

 $('#userNav').change(function() {
window.location = $(':selected',this).attr('href')
});




<select id="userNav">
<option></option>
<option href="http://google.com">Goolge</option>
<option href="http://duckduckgo.com">Go Go duck</option>
</select>
 

Cela fonctionne pour le href dans une option sélectionnée