10
votes

Ajouter un attribut sélectionné à l'option dans Sélectionner le menu avec JQuery

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);


6 commentaires

Avez-vous essayé d'utiliser .attr ("sélectionné", true) ?


Je connais ce plugin Supports sélectionnés: programmationDrunk.com/current-projects/dropdowreplacement/#u SE


.attr ('sélectionné', vrai) 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


3 Réponses :


0
votes

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.


0 commentaires

5
votes

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 SELECTECTELLEDEX STRY> sur l'élément SELECT, vous pouvez pirater avec l'original SETTATTR () Fonction: P>

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


1 commentaires

Merci. J'ai trouvé cet autre message aussi, très utile Stackoverflow.com/Questtions/3729741/...



32
votes

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)


3 commentaires

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) ? Si je me souviens, lors de l'utilisation d'une ancienne approche pour ce cas, il doit être .attr ("sélectionné", "sélectionné") .