web-dev-qa-db-fra.com

Onchange ouvrir l'URL via select - jQuery

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?

jqueryonchange
71
Coughlin

C'est assez simple, voyons un exemple de travail:

<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="https://www.gurustop.net">GuruStop.NET</option>
</select>

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

$(function() {
  // bind change event to select
  $('#dynamic_select').on('change', function() {
    var url = $(this).val(); // get selected value
    if (url) { // require a URL
      window.location = url; // redirect
    }
    return false;
  });
});
<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="https://www.gurustop.net">GuruStop.NET</option>
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
        ></script>

.

Remarques:

  • La question spécifie déjà jQuery . Donc, je garde d'autres alternatives en dehors de cela.
  • Dans les versions antérieures de jQuery (<1.7), vous souhaiterez peut-être remplacer on par bind.
  • Ces informations sont extraites des astuces JavaScript dans Bulletin d’information des développeurs Web de Meligy .

.

192
Meligy

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>
157
Mark Eirich

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.

14
Lars Tuff

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

JS Fiddle Exemple

$('#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

5
robertparkerx

Autrement:

    <script type="text/javascript">
        function change_url(val) {
            window.location=val;
        }
    </script>            
    <select style="width:130px;" onchange="change_url(this.value);">
            <option value="http://www.url1.com">Option 1</option>
            <option value="http://www.url2.com">Option 2</option>
     </select>
4
joan16v

Voici comment je le ferais

<select id="urlSelect" onchange="window.location = jQuery('#urlSelect option:selected').val();">
 <option value="http://www.yadayadayada.com">Great Site</option>
 <option value="http://www.stackoverflow.com">Better Site</option>
</select>
4
MattoTodd

Si vous ne voulez pas que l'URL le mette sur la valeur de l'option, je vous donnerai un exemple:

<select class="abc">
    <option value="0" href="hello">Hell</option>
    <option value="1" href="dello">Dell</option>
    <option value="2" href="cello">Cell</option>
</select>

    $("select").bind('change',function(){
        alert($(':selected',this).attr('href'));
    })
2
Prakash
<select name="xx" class="xxx" onchange="_name(this.options[this.selectedIndex].value,this.options[this.selectedIndex].getAttribute('rel'))">
  <option value="x" rel="xy">aa</option>
  <option value="xxx" rel="xyy">bb</option>
</select>


//for javascript
function _name(value,rel) {
alert(value+"-"+rel);
}
2
Yıldıray ÜNLÜ
**redirect on change option with jquery** 

 <select id="selectnav1" class="selectnav">
            <option value="#">Menu </option>
            <option value="   https://www.google.com">
            Google
            </option>
            <option value="http://stackoverflow.com/">
              stackoverflow
            </option>

         </select>

<script type="text/javascript">
   $(function () {

        $('#selectnav1').change( function() {
      location.href = $(this).val();
   });
   });
</script>
1
M.Ganji

Essayez ce code son fonctionne parfaitement

<script>
$(function() {

    $("#submit").hide();

    $("#page-changer select").change(function() {
        window.location = $("#page-changer select option:selected").val();
    })

});
</script>

<?php
    if (isset($_POST['nav'])) {
         header("Location: $_POST[nav]");
    }
?>
<form id="page-changer" action="" method="post">
    <select name="nav">
        <option value="">Go to page...</option>
        <option value="http://css-tricks.com/">CSS-Tricks</option>
        <option value="http://digwp.com/">Digging Into WordPress</option>
        <option value="http://quotesondesign.com/">Quotes on Design</option>
    </select>
    <input type="submit" value="Go" id="submit" />
</form>
1
Randhir Yadav

Je crois que le moyen le plus simple de redéfinir un emplacement dans l'onglet de sélection est le suivant:

<select onchange="location = this.value;">
     <option value="https://www.google.com/">Home</option>
     <option value="https://www.bing.com">Contact</option>
     <option value="mypets.php">Sitemap</option>
</select>
1
Syed Muhammad Wasiq Saleem

Essayez ce code avec Firefox, Chrome, IE

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="" selected>---Select---</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>
1
Prafulla