CODEWITHSUNDEEP
jquery
user478636
user478636

Reputation: 3424

jquery and unordered list

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;
}

Upvotes: 1

Views: 572

Answers (2)

Akhil Thayyil
Akhil Thayyil

Reputation: 9403

You can use this jQuery:

$(function() {
   $("#bdiv").buttonset();
   $(".select").button().click(function() {$("#selector_list").toggle();})

$(".selectarrow").button({text: false,icons: {primary: "ui-icon-triangle-1-s"}
}).click(function() {$("#selector_list").toggle();})

});

See a demo at jsFiddle.

Upvotes: -1

Naveed
Naveed

Reputation: 42093

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.

Upvotes: 2

Related Questions