Jquery SelectBox

Question

Я хотел настроить SelectBox с помощью jquery, и я сделал этот поддельный selectBox с помощью Jquery, но он не работает.

Предполагается установить невидимый тег "select" и поместить вместо него div с ul внутри.

Я новичок в 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

Эй, я пытался работать над той же концепцией. Пусть это поможет.

К вашему сведению, это не полноценный код. Я все еще работаю над этим.

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, конвертировать / изменить на JSFIDDLE

Answer 2

Проблема в том, что вы не указываете, какой атрибут получить из элемента 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');
    });
});

И, кстати, вы должны использовать идентификаторы элементов вместо классов для селекторов, особенно в этом случае, когда у вас есть один элемент каждого.