Question

我试图重写选择到ul li并相应地设置它的样式。但是我对代码的重量和路上的小麻烦感到非常恼火。

所以我想完全放弃这个想法，只需使用普通的ul li菜单和某种javascript来使其像select一样（表单提交等）。

这可能吗？您可以给我的任何示例代码？

我担心的是跨浏览器兼容性。

Answer 1

可爱的主意。我只是在小提琴中做了一个检查here。

<强> 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; }

Answer 2

该插件网站已关闭，但Google为我提供了this link。这是列出几个drop down menus的另一个页面。

Answer 3

选择replacemenet的基本思路是这样的。它生成基本的html和事件绑定，然后你可以用css设置它。看看这个。 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'));

Answer 4

完全按照列表进行操作并使用javascript不是最好的主意，因为没有javascript的每个人都无法使用此功能。

这是一个jQuery实现，它具有常规表单选择回退（实际上它映射了现有的选择）。您只需要更改第一个选择器并设置列表样式......脚本将完成其余的工作。

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

    } );


} );

我可以使用ul li而不是select dropdown和jquery使它成为表单的一部分吗？

4 个答案: