Using UL instead of html SELECT

See more:

HTML

PHP

jQuery

I am trying to build a dropdown select menu similar to the category and location dropdowns of Gumtree:

www.gumtree.co.za

The following function seems to perform the general idea, using data-value to pass values to each li (http://jsfiddle.net/Starx/a6NJk/2/[^]):

HTML:

<a href="#"A id="submit"> Get Value</a>
<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>

JS:

$("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();
});


$("#submit").click(function() {
    alert("The selected Value is "+ $("ul").find(".selected").data("value"));
});

How would I use the name attribute though, to substitute for:

<select name="example">

Any help will be greatly appreciated!