Question

I want to have the same functionality of select in HTML but using div and unordered list.

When the page load, the name of the button should be the the element li which has class=”selected”. It means that I have to change html of selector_button to one that has the class selected in the li tag.

Also How can I make the unordered list hide when user clicks on any part of the page or selects another item from the list.

how can i achieve this?

Code: http://jsfiddle.net/cZ36w/2/

JS thus far:

$('#select_button').html();

$('#selector_button').click(function() {
    $('#selector_list').show();
});

HTML:

<div id="selector_button">
    <ul style="display:none;" id="selector_list">
        <li class="option-selected" title="7">Everything</li>
        <li title="1">A</li>
        <li title="4">B</li>
        <li title="9">C</li>
        <li title="8">D</li>
        <li title="22">E</li>
    </ul>
</div>

CSS:

.option-selected
{
    color:#c0c0c0;
}

Answer 1

If I understand you want to use your <ul> list as html select box.

Look at this: http://jsfiddle.net/cZ36w/5/

CSS: Same

HTML: Remove style="display:none;" from <ul>

jQuery:

$('#selector_button li').hide();
$('#selector_button li.option-selected').show();


$('#selector_button ul li').hover(function() {
    $('#selector_button ul li').show(); 
});

$('#selector_button ul li').mouseout(function() {
    $('#selector_button li').hide();
    $('#selector_button li.option-selected').show();
});


$('#selector_button ul li').click(function() {
    $('#selector_button ul li').removeClass('option-selected'); 
    $(this).addClass('option-selected'); 
});

It is not perfect but it will give you a direction to achieve your goal.