Je fais un plugin de menu SELECT pour remplacer les sélectionnements par défaut laides et être cohérent sur différents OS.
Voici la démo (seulement Firefox et WebKit) http://spacirferferreigns.com/selectmenu/ p>
C'est déjà en train de travailler, mais je " m Avoir des problèmes d'attribution de l'attribut "sélectionné" à l'option. Le code fonctionne avec n'importe quel autre attribut, mais je ne peux pas l'obtenir de fonctionner avec l'attribut sélectionné. P>
Ceci fonctionne: p>
(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);
3 Réponses :
Considérant votre dernier commentaire, je suppose que votre problème est Firebug, pas votre code. Pourquoi cela fonctionne avec d'autres attributs sauf "sélectionnés", est que la sélection d'une option à partir de la liste déroulante ne modifie pas l'attribut sélectionné dans le DOM. Je vous assure, il n'y a rien de mal avec votre code. P>
Vérifiez Ce précédent détail Réponse sur SO :
Si vous voulez vraiment connaître la sortie HTML avec un attribut sélectionné, et non seulement JQUERY MAITININGER le droit select[0].options[select[0].selectedIndex].setAttribute('selected','selected');
Merci. J'ai trouvé cet autre message aussi, très utile Stackoverflow.com/Questtions/3729741/...
AS de JQuery 1.6 "Pour récupérer et modifier les propriétés DOM telles que l'état vérifié, sélectionné ou désactivé d'éléments de formulaire, utilisez la méthode .prop ()."
$("#someselect option[value=somevalue]").prop("selected", false)
Cela devrait être la meilleure réponse, beaucoup plus simple que les autres, plus anciennes
Merci@sidarcy. Cela m'a beaucoup aidé. Bien sûr, cela devrait aller sur le dessus.
Ne devrait-il pas être .prop ("sélectionné", vrai) code>? Si je me souviens, lors de l'utilisation d'une ancienne approche pour ce cas, il doit être
.attr ("sélectionné", "sélectionné") code>.
Avez-vous essayé d'utiliser
.attr ("sélectionné", true) code>?
Je connais ce plugin Supports sélectionnés: programmationDrunk.com/current-projects/dropdowreplacement/#u SE
.attr ('sélectionné', vrai) code> ne fonctionne pas non plus.
J'ai essayé ce code sur votre page de test dans FF 4: Fonctionne bien pour moi! Attribut non attribué directement en Firebug, mais la valeur et l'option sélectionnée de SELECT est modifiée chaque fois que j'ai modifié l'attribut d'index.
Oui, je viens d'ajouter un bouton qui alerte le statut sélectionné et ça fonctionne, il ne figure que dans Firebug. Cela me rendait fou. Vérifiez la démo spaçairesigns.com/selectmenu
Ça marche pour moi aussi! Comme le dit Coolesh, il n'est pas assigné à Firebug, mais cela fonctionne correctement. Jsfiddle.net/smazq