JQuery ul2select

JQuery plugin that converts <ul> list into a <select> (and back).

Demo

Take a look to the demo, and you will understand what we are talking about.

Requirements

JQuery

Usage

You can convert any <ul> into a <select> simply calling the .ul2select(); function over the <ul> selector:

// Remenber to wait until document is ready! ;) $(document).ready(function() {   $('.my-class').ul2select(); }); 

The function will replace the original <ul>:

<ul class="my-class">   <li class="active"><a href="/url">Title of link 1</a></li>   ...   ... </ul> 

With a <select> with this default structure:

<div class="u2s-wrapper">   <span class="u2s-current">Currently selected option</span>   <select class="my-class u2s-converted">     <option value="/url">Title of link 1</option>     ...   </select> </div> 

Default functionallity

By default ul2select will wrap the resulting <select> with an <div class="u2s-wrapper"> and will add an additional <span> to ease the CSS styling of custom selects. The <span> content will be automatically updated on changing the <select> option.

It also maps the currently selected option in the list to the corresponding option in the select (and back when you "revert", see the "revert" feature below).

It handles also multilevel <ul> indenting the <select> options with 3 spaces.

By defaul the url inside the <li> it's used as the value for the corresponding <option> inside the <select>.

Custom options

You have several customizable options:

$('.my-class').ul2select({   // Class used in the <li> to mark active option   // default is "active"   active_class: 'selected',   // Custom wrapper around the select   // default: <div class="u2s-wrapper">   select_wrapper: '<div id="my-custom-wrapper">' }); 

If you want a "plain select", without wrapper, span... etc

$('.my-class').ul2select({   // Do not add wrapper and span   select_wrapper: null }); 

Custom events

Probably you'll find yourself in situations where you need to add a custom event on the resulting <select>, to be fired on change... focus... etc. This can also be done when initializing ul2select.

$('.u2s-fake-select.sample-1').ul2select({   custom_events: {     // Custom "on change" event     'change': function(){       // $(this) refers the select       console.log($(this).find('option:selected').text())     }   } }); 

Revert to the original <ul>

You can revert the select back to the original <ul> list at any time simply calling the function with the revert option, this way:

$('.my-class').ul2select('revert'); 

Responsive

The conversion of <ul> to <select> its widely used in responsive designs, if that's your case probably you can take a look to:

MQBE. Media Query Breakpoint Events

For a winning combo ;)

You ha a responsive sample in the demo too.