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.