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

Lovely idea. I just made one in the fiddle check it out here.

HTML

    
[SELECT]
    
Option 1
    
Option 2
    
Option 3

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: #ffffd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }