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

Question

I went a very long time trying to rewrite select on ul li and adjust it accordingly. But I'm very annoyed by the weight of the code and the little troubles on the way.

So, I am thinking of completely abandoning this idea and just using the normal ul li menu and some kind of javascript so that it functions as select (for submitting a form, etc.).

So is this possible? any sample code you can give me?

My problems are browser compatibility.

Answer 1

Great idea. I just made one in the violin to check it out here .

HTML

<ul> <li class="init">[SELECT]</li> <li data-value="value 1">Option 1</li> <li data-value="value 2">Option 2</li> <li data-value="value 3">Option 3</li> </ul> 

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

Answer 2

The plugin site does not work, but Google got this link . Here is another page that lists a few drop-down menus .

Answer 3

The basic idea for choosing replacemenet is this. It generates a basic html and event binding, and then you can just draw it using css. Check this. 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 += '<li><a href="#" class="item">'+ $(this).text() +'</a></li>'; }); html = '<ul class="menu">'+ '<li class="sub">'+ '<a class="sel" href="#">'+ $opts.filter(':selected').text() +'</a>' + '<ul>' + items + '</ul>'+ '</li>'+ '</ul>'; $(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')); 

Answer 4

Completely doing this as a list, but with javascript is not the best idea, because everyone who does not have javascript cannot use this functionality.

Here is a jQuery implementation that has a regular select fallback form (in fact, it displays an existing selection). You just need to change the first selector and create a list ... the script will do the rest.

 jQuery( '.woocommerce-ordering select' ).each( function() { var target = jQuery( this ); var selected = target.find( 'option:selected' ).text(); var map = jQuery( '<div class="selectmap"><span>' + selected + '</span><ul class="selectmap"></ul></div>' ).insertAfter( target ); target.hide(); target.find( 'option' ).each( function() { var c = jQuery( this ); var u = map.find( 'ul' ); console.log( u ); console.log( c.text() ); jQuery( '<li data-value="' + c.attr( 'value' ) + '">' + c.text() + '</li>' ).appendTo( u ); } ); map.find( 'li' ).click( function() { map.find( 'span' ).text( jQuery( this ).text() ); target.val( jQuery( this ).attr( 'data-value' ) ).trigger( 'change' ); } ); } );