Javascript Girl
  1. Javascript Girl
  3. Sélectionnez Menu, allez sur url sur select avec JQuery?
Intereting Posts
Comment analyser et afficher l'objet JSON avec des valeurs dynamiques? Typeahead.js dans le projet Django Comment puis-je remplacer console.log () et ajouter un mot au début de la sortie? Uncaught TypeError: Impossible de lire la propriété 'createDocumentFragment' de undefined Console.log () est défini mais ne se connecte pas à IE – console vide Val.replace (/ / g, '') produisent SyntaxError: plage invalide dans la classe de caractères Mocking and Stubbing with trainer La fonction potentiellement asynchique renvoie une promesse qui résout immédiatement? Définir la police Les icônes fantastiques comme curseur – est-ce possible? Python 3, Web-scraping, et Javascript Ajax appel à la méthode Web Asp.net en utilisant Jquery L'élément vidéo disparaît dans Chrome lorsqu'il n'utilise pas les contrôles Comment créer un sous-document multi-navigateur avec iframe ou shadow dom? Trappez la touche enter, mais pas lors du choix de la suggestion de remplissage automatique du navigateur Comment utiliser un plugin Markdown-it sans nœud ou require.js

Sélectionnez Menu, allez sur url sur select avec JQuery?

J'ai le html suivant:

Balisage HTML 

<ul id="test"> <li><a href="http://www.yahoo.com">yahoo</a></li> <li><a href="http://www.google.com">Google</a></li> </ul>

Et un certain code JS:

Code JQuery / JavaScript 

 $('ul#test').each(function() { var select=$(document.createElement('select')).insertBefore($(this).hide()); $('>li a', this).each(function() { option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()); }); });

Ce code produit un menu déroulant sélectionné, exactement ce que je veux, mais ma question est de savoir comment puis-je accéder à l'URL sélectionnée? Donc, si je clique sur yahoo, cela m'amène à yahoo.com?

Merci de votre aide! 

 $('ul#test').each(function() { var select=$(document.createElement('select')).insertBefore($(this).hide()); $('>li a', this).each(function() { option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()); }); select.change(function(){ //alert('url = ' + this.value ); window.location.href = this.value; }) });

Testé la démo de travail sur les principaux navigateurs.

Cela devrait le faire: 

  $('ul#test').each(function() { var select=$(document.createElement('select')).insertBefore($(this).hide()); $('>li a', this).each(function() { option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()); option.click(function(){window.location = $(this).val())}); }); });

Ajoutez un événement de modification à la création de la sélection et envoyez l'utilisateur à la valeur sélectionnée. 

 var select=$(document.createElement('select')).insertBefore($(this).hide()).change(function(){ document.location.href = $(this).val(); });

Donnez-lui un essai: 

 $('ul#test').each(function() { // also give the select an id var select = $(document.createElement('select')).attr('id', 'myselect').insertBefore($(this).hide()); $('>li a', this).each(function() { option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()); }); });

Maintenant pour rediriger … 

 $(function(){ $('#myselect').live('change', function(){ document.location.href = $(this).val(); }); });

La méthode live () utilisée parce que votre boîte de sélection est créée dynamiquement dans le DOM. 

 <select name="dest" class="selec" onchange='document.location.href=this.options[this.selectedIndex].value;'>