Question

我想用jquery自定义一个SelectBox，我用Jquery做了这个假的selectBox，但它没有用。

应该将“select”标签设置为不可见，而将内部的ul放入div中。

我是Jquery的新手所以，如果你能帮助我，请你好吗？

提前致谢，

Orangejuice .-

这是html：

<label class="search-filter-tl">Sort by</label>
        <select class="select-sort-by" name="sort-by">
            <option>Relevance</option>
            <option value="alp-asc">Alphanumeric ASC</option>
            <option value="alp-desc">Alphanumeric DESC</option>
            <option value="pd-asc">Publish date ASC</option>
            <option value="pd-desc">Publish date DESC</option>
        </select>
        <div id="replace-sort-by" class="replace">
            <div class="current">Relevance</div>
            <ul id="sort-by-options" class="options">
                <li rel="alp-asc" >Alphanumeric ASC</li>
                <li rel="alp-desc">Alphanumeric DESC</li>
                <li rel="pd-asc">Publish date ASC</li>
                <li rel="pd-desc">Publish date DESC</li>
            </ul><!-- #options -->
        </div><!-- #replace-sort-by -->

这就是Jquery：

$(document).ready(function (){ //Onload:Run a function when the page is fully loaded including graphics.

    var selectSortBy = $('select.select-sort-by');
    var replaceSortBySelect = $('div.replace');

    selectSortBy.css('display', 'none');
    replaceSortBySelect.css('display', 'block');

    var lis = $('ul.options li');

    for (var i = 0; i <= lis.length; i++){
        lis[i].click(function (){ //When you do a click in lis...
            selectSortBy.val($(this).attr()); //al valor del select asignale el valor del atribute del div
            $('ul.options').css('display','none'); //Do not show the option tag
            $('div.current').html($(this).html()); //Faked selected option that will be showned in the select input.
        });

    }

    $(replaceSortBySelect).mouseover(function() {
        $('ul.options').css('display','block');
    });

    $(replaceSortBySelect).mouseleave(function() {
        $('ul.options').css('display','none');
    });

});

Answer 1

问题是您没有指定从li元素获取哪个属性。

您可以使用：

$(function() {
    var selectSortBy = $('select.select-sort-by');
    var replaceSortBySelect = $('div.replace');

    selectSortBy.css('display', 'none');
    replaceSortBySelect.css('display', 'block');

    $('ul.options li').click(function() {
        selectSortBy.val($(this).attr('rel'));
        $('ul.options').css('display','none');
        $('div.current').html($(this).html());
    });

    $(replaceSortBySelect).mouseover(function() {
        $('ul.options').css('display','block');
    });

    $(replaceSortBySelect).mouseleave(function() {
        $('ul.options').css('display','none');
    });
});

顺便说一句，你应该使用元素的id而不是选择器的类，特别是在这种情况下，每个元素都有一个元素。

Answer 2

嘿，我试图研究同样的概念。愿这有用。

仅供参考，这不是完整的代码。我还在努力。

<强> SCRIPT

(function ($) {

    $.fn.customSelect = function( options ) {
        var settings = $.extend({
            //mainWidth: '200', 
            selected: '0',
            alignRight: 'false',
        }, options );

        return this.each(function() {
            var el          = $(this);
            var name        = el.prop('name');

            var optionTag   = el.children();
            var wrapperDIV  = $('<div class="customSelect"/>');
            var newDIV      = $('<div class="custom-select"/>');
            var inputTag    = $("<input name='"+name+"' type='text' readonly='readonly' />").hide();
            var inputDummy  = $("<div class='input-dummy'/>");
            var valueHolder = $('<div class="value-holder clearfix"/>');
            var ULTag       = $('<ul class="clearfix"/>');
            var spanTag     = '<span/>'




            el.wrap(wrapperDIV);
            el.parent().append(newDIV);

            newDIV.append(valueHolder);
            valueHolder.append(spanTag);
            valueHolder.append(inputTag);
            valueHolder.append(inputDummy);
            newDIV.append(ULTag);


            optionTag.each(function(){
                ULTag.append("<li data-selected='"+$(this).val()+"'>"+$(this).text()+"</li>");
            }).end().remove();

            var valDefault  = $('li').eq(settings.selected - 1).val();
            var textDefault = $('li').eq(settings.selected - 1).text();
            $(inputTag).val(valDefault);
            $(inputDummy).text(textDefault);

            valueHolder.click(function(){
                $(this).next().toggle();
            });

            ULTag.each(function(){
                $('li',this ).click(function(){
                    $(this).each(function(){
                        $(this).addClass('active').siblings().removeClass('active');
                        var x = $(this).data('selected');
                        var y = $(this).text();
                        $(inputTag).val(x);
                        $(inputDummy).text(y);
                        $(this).parent().hide();
                    });
                });
            });

            if(settings.selectorRight == 'true'){
                inputDummy.css('float', 'right');
                //valueHolder.css('float', 'right');
            }
            else{
                inputDummy.css('float', 'left');
                //valueHolder.css('float', 'left');
            }

            var woVH = valueHolder.width();
            inputDummy.width(woVH-20);
            ULTag.width(woVH);


        });
    };

}( jQuery ));

与：HTML SELECT OPTION convert/changed to

Jquery SelectBox

2 个答案: