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

To completely do it as list and with javascript is not the best idea because everyone that has no javascript cannot use this functionality.

Here is a jQuery implementation that has the regular form select fallback (In fact it maps a existing select). You just need to change the first selector and style the list ... the script does the rest.

jQuery( '.woocommerce-ordering select' ).each( function() {


    var target = jQuery( this );

    var selected = target.find( 'option:selected' ).text();



    var map = jQuery( '
' + selected + '
' ).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( '
' + c.text() + '
' ).appendTo( u );

    } );


    map.find( 'li' ).click( function() {

        map.find( 'span' ).text( jQuery( this ).text() );
        target.val( jQuery( this ).attr( 'data-value' ) ).trigger( 'change' );

    } );


} );