puis-je utiliser ul li au lieu de sélectionnez le menu déroulant et avec jquery faire partie d'un formulaire?

Je suis vraiment long chemin d'essayer de réécrire sélectionnez ul li et le style en conséquence. Mais je suis vraiment ennuyé avec le poids de code et les petits ennuis sur la route.

Donc je suis en train de penser à abandonner l'idée complètement, et il suffit d'utiliser la normale ul li menu et une sorte de javascript pour le faire fonctionner comme select (pour l'envoi du formulaire, etc).

Alors, est-ce possible? un exemple de code que vous pouvez me donner?

De mes préoccupations est de compatibilité du navigateur.

Étant donné que vous êtes à l'aide de jQuery pourquoi n'utilisez-vous pas un de ces plugins qui fait cela?
Je ne peux pas en trouver un...
Les plugins jQuery, la page est morte 🙁
Oui, vous pouvez, ici, est un bonne.

OriginalL'auteur | 2012-03-15

jquery

Belle idée. Je viens de faire un dans le violon, check it out ici.

HTML

<ul>
    <li class="init">[SELECT]</li>
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

JAVASCRIPT

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});

CSS

ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

(+1), génial...
fantastique!!!! l'homme c'est génial, tellement simple et élégant... et compatibilité inter-navigateur va aller aussi loin que le css qui gère ul li 🙂
Je vous remercie beaucoup. Mais comment puis-je ajouter une flèche?
Je sais que c'est tard, mais pour d'autres personnes qui veulent ajouter une flèche, il suffit d'ajouter les éléments suivants à li.init: background:url(icon.png) no-repeat center right; background-size: 10px 🙂

OriginalL'auteur Starx

L'idée de base pour sélectionner replacemenet est-ce. Il génère le html de base et de liaison des événements et alors vous pouvez simplement le style avec css. Check it out. http://jsfiddle.net/elclanrs/H63MU/

var ulSelect = function($select) {

    //$select.hide(); <-- Uncomment in production
    var $opts = $select.find('option');

    return (function() {

        var items = '',
            html = '';

        $opts.each(function() {
            items += '<li><a href="#" class="item">'+ $(this).text() +'</a></li>';
        });

        html =
            '<ul class="menu">'+
                '<li class="sub">'+
                    '<a class="sel" href="#">'+ $opts.filter(':selected').text() +'</a>' +
                    '<ul>' + items + '</ul>'+
                '</li>'+
            '</ul>';

        $(html)
            .find('.sub a')
            .click(function(e) { //You can attach more events...
                e.preventDefault();
                var $this = $(this);
                $this.parents('.menu').find('.sel').text($this.text());
                $opts.eq($this.parent().index()).prop('selected', true);
            }).end().insertAfter($select);

    }());

};

ulSelect($('#select'));

OriginalL'auteur elclanrs

0

Le plugin site est en panne, mais Google m'a l' ce lien.
Voici une autre page qui liste un couple de des menus déroulants.

OriginalL'auteur Aaron Digulla

Complètement le faire sous forme de liste et avec le javascript n'est pas la meilleure idée, parce que tout le monde qui n'a pas de javascript ne peut pas utiliser cette fonctionnalité.

Ici est un jQuery mise en œuvre qui a la forme régulière sélectionnez secours (En fait, elle correspond à une sélection existante). Vous avez juste besoin de changer la première sélection et le style de la liste ... le script fait le reste.

jQuery( '.woocommerce-ordering select' ).each( function() {


    var target = jQuery( this );

    var selected = target.find( 'option:selected' ).text();



    var map = jQuery( '<div class="selectmap"><span>' + selected + '</span><ul class="selectmap"></ul></div>' ).insertAfter( target );


    target.hide();


    target.find( 'option' ).each( function() {

        var c = jQuery( this );
        var u = map.find( 'ul' );

        console.log( u );

        console.log( c.text() );

        jQuery( '<li data-value="' + c.attr( 'value' ) + '">' + c.text() + '</li>' ).appendTo( u );

    } );


    map.find( 'li' ).click( function() {

        map.find( 'span' ).text( jQuery( this ).text() );
        target.val( jQuery( this ).attr( 'data-value' ) ).trigger( 'change' );

    } );


} );

OriginalL'auteur GDY

Vous devez vous connecter pour publier un commentaire.