Rendre l'option selectée en fonction d'une liste non ordonnée à l'aide de jQuery

Question

J'ai converti ma liste non ordonnée en une liste d'options select, cependant je ne suis pas sûr de comment je peux ajouter l'attribut 'selected' à l'option qui correspond au même lien hypertexte dans la liste.

Marquage

         Foo
         Bar
         Boo

Javascript

$('').appendTo('.navigation');

// Remplir la liste déroulante avec les éléments de menu
$('.navigation ul a').each(function() {
 var el = $(this);
 $('', {
    "value"   : el.attr('href'),
    "text"    : el.text()
 }).appendTo('.navigation select');
});
// Naviguer vers la page via l'option sélectionnée
$('.navigation select').change(function() {
  window.location = $(this).find('option:selected').val();
});
// Masquer la liste de navigation
$('.navigation ul').hide();

Answer 1

Vous pouvez utiliser la méthode hasClass :

 $('', {
    "value"      : el.attr('href'),
    "text"       : el.text(),
    "selected"   : el.hasClass('selected')
 }).appendTo('.navigation select');

http://jsfiddle.net/5V5rY/

Answer 2

Il semble que vous créez dynamiquement l'élément select.

Donc vous devez déléguer l'événement au conteneur parent le plus proche statique pour le laisser fonctionner.

$('.navigation select').change(function() {

est censé être

$('.navigation').on('change', 'select',function() {

Aussi, pour sélectionner la valeur, vous pouvez simplement utiliser .val();

window.location = $(this).val();