Añadir atributo seleccionado la opción en el menú de selección con jQuery

Question

estoy haciendo un selecto menú de plug-in para reemplazar los selecciona por defecto feas y ser consistente a través de diferentes sistemas operativos.

Aquí está la demostración (sólo Firefox y WebKit)
http://spacirdesigns.com/selectMenu/

Ya se está trabajando, pero tengo problemas para asignar el atributo "seleccionado" para la opción. El código funciona con cualquier otro atributo pero no puedo hacer que funcione con el atributo seleccionado.

Esto funciona:

select.find('option') 
    .removeAttr('whatever') 
    .eq(index).attr('whatever', 'hello'); 

Esto no es así:

select.find('option') 
    .removeAttr('selected') 
    .eq(index).attr('selected', 'selected'); 

Y aquí está el código hasta ahora:

(function($){ 

     $.fn.selectMenu = function() { 

      var select = this; 
      select.hide(); 

      var title = select.attr('title'); 
      var arrow = 'img/arrow.png'; 
      var items = ''; 

      select 
       .children('option') 
       .each(function(){ 
        var item = $(this).text(); 
        if ($(this).val() != '') { 
         $(this).attr('value', item); 
        } 
        items += '<li>' + item + '</li>' 
       }); 

      var menuHtml = 
       '<ul class="selectMenu">' + 
       '<img src="' + arrow + '" alt=""/>' + 
       '<li>' + title + '</li>' + 
       '<ul>' + items + '</ul>' + 
       '</ul>'; 

      select.after(menuHtml); 

      var menu = $(this).next('ul'); 
      var list = menu.find('ul'); 

      menu 
       .hover(function(){}, function(){ 
        list.hide(); 
       }) 
       .children('li').hover(function(){ 
        list.show(); 
       }); 

      menu.find('ul li').click(function(){ 
       var index = $(this).index(); 
       menu.children('li').text($(this).text()); 
       select.find('option') 
        .removeAttr('selected') 
        .eq(index).attr('selected', 'selected'); 
       list.hide(); 
      }); 

     }; 

    })(jQuery); 

Answer 1

Salida this previous detailled answer on SO:

Si realmente quiere maitain salida HTML con el atributo seleccionado, y no sólo han jQuery maitaining la derecha selectedIndex atributo en el elemento de selección, se puede cortar con settAttr originales() Función :

select[0].options[select[0].selectedIndex].setAttribute('selected','selected'); 

Pero tan pronto como se lo sigue usando métodos jQuery para val() o ': seleccionado', que should'nt consigue cualquier problema, usted podría tener un problema sólo si estabas análisis de HTML para encontrar atributo seleccionado, algo que no deberías hacer, nunca.

Answer 2

Teniendo en cuenta su último comentario Asumo que su problema es Firebug no tu código Por qué esto funciona con otros atributos, excepto "seleccionado", es que seleccionar una opción del menú desplegable no modifica el atributo seleccionado en el DOM. Te aseguro que no hay nada malo con tu código.

Answer 3

A partir de jQuery 1.6 "Para recuperar y cambiar las propiedades DOM tales como el estado marcado, seleccionado o deshabilitado de los elementos del formulario, use el método .prop()".

$("#someselect option[value=somevalue]").prop("selected", "selected")