Custom SelectBox (UL-LI) with same functionality i

Question

I am working on HTML form on custom requirement. This is personal project and I do not want to use ready-to-use plugin.

I am placing all my code here and need your help for getting one of the serious issue I am getting. First let's see what I have done so far with below code!

WHAT I HAVE DONE SO FAR: I have taken SELECT - OPTION structure inside HTML form. I wrote custom function to convert the same into UL - LI structure maintaining the same functionality with SELECT - OPTION while submitting the form.

The most important thing is the VALUE attribute in OPTION tag. I took custom attribute "data-selected" for such a calculation.

QUERY: I am facing an issue while submitting the form with multiple SELECTs on the page (after converting structure into UL- LI).

Analysis:

1. While trying with default SELECT -OPTION structure, I am getting below parameters appending the URL on FORM submission without changing any value from the multiple dropdowns. https://www.google.com/?abc=1&def=1&xxx=1. And as you can see in the URL after "?" there is NAME attribute coming with the default value "1" which was default selected value.

2. Now after using my function (which converts SELECT-OPTIONS into UL-LIs) I am following #1 and I found it's misbehaving while we are not changing the value from the dropdown. IF I SUBMIT THE FORM WITHOUT CHANGING THE VALUE FROM DROPDOWN GETTING THIS PARAMETER APPENDING TO URL. Kindly request to compare URL in #1 with this >> https://www.google.com/?abc=0&def=0&xxx=0. Here the default selected has been passed through configuration. <script>$('select').customSelect({selected: '2',alignRight: 'true'});</script>. configuration parameter "selected" given value "2". So by default 2nd LI should be selected if we do not change value from dropdown INSTEAD OF "0"(ZERO) IN THE URL OF #2.

I need help to get that default value!

Below are 2 code snippets and

HTML

<form method="get" action="http://google.com">
    <select name="abc">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>
    <br><br><br><br><br><br>
    <select name="def">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>
    <br><br><br><br><br><br>
    <select name="xxx">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>
    <input type="submit" value="submit">
</form>
<script>
    $('select').customSelect({
        selected: '2',
        alignRight: 'true'
    });
</script>

JS

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

JSFIDDLE

Answer 1

You need to change your lines

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

to

var valDefault = $(optionTag).eq(settings.selected - 1).val();
var textDefault = $(optionTag).eq(settings.selected - 1).text();

as you were selecting the nth li element on the page every time. Have a look at my demo fiddle with your console open and you''ll see what I mean.

Demo:http://jsfiddle.net/robschmuecker/358p1816/1/