can I use ul li instead of select dropdown and with jquery make it part of a form?

Question

I went really long way trying to rewrite select to ul li and style it accordingly. But I\'m getting really annoyed with the weight of code and minor annoyances on the way.

Answer 1

The basic idea for select replacemenet is this. It generates the basic html and event binding and then you can just style it with 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 += '
'+ $(this).text() +'
';
        });

        html =
            '
'+
                '
'+
                    ''+ $opts.filter(':selected').text() +'' +
                    '
' + items + '
'+
                '
'+
            '
';

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