Reuse dropdown function in jQuery

Question

I have a unordered list which needs the same functionality as the select tag. This works fine, but I want to reuse the dropdown list multiple times on every page and here things start to mess up as the selectors apply on all the lists and thus duplicate every behaviour and .clone(). I think I need to use the .closest() method to prevent the duplication but where and how to apply this?

Thanks

Working demo

Duplicate issue demo

jQuery code:

$(".cloned").text($(".selected").text());
$(".options").hide();

$(".cloned").click(function(){
    $(".options").toggle();
    e.preventDefault();                 
});

$('.select .options li').click(function(){

    $(this).next.siblings().removeClass('selected');
    $(this).next.addClass('selected');
    $(".cloned").text($(".selected").text());   
    $(".options").hide();   
});

html code:

<div class="select">
    <span class="cloned"></span>

    <ul class="options">
        <li class="selected">Kensington</li>
        <li>Lingfield</li>
        <li>Wolverhampton</li>
        <li>Cheltenham</li>
    </ul>
</div>

<div class="select">
    <span class="cloned"></span>

    <ul class="options">
        <li class="selected">Kensington</li>
        <li>Lingfield</li>
        <li>Wolverhampton</li>
        <li>Cheltenham</li>
    </ul>
</div>

isherwood · Accepted Answer · 2013-01-24 17:02:26Z

1

$(".cloned").click(function () {
  $(this).next(".options").toggle();
});

http://jsfiddle.net/6mukW/10

You also have some issues with the other part of the jQuery (select/deselect), but I'm not really sure what you're trying to do.

edited Jan 24, 2013 at 17:02

answered Jan 24, 2013 at 16:51

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1901096 Over a year ago

Am trying to recreate a <select> within a unordered list. I attached a working demo, basically this is what I try to do but for multiple unordered lists.. Thanks for you answer, will check it.

isherwood Over a year ago

Demo updated with some changes to your li functionality. jsfiddle.net/6mukW/10

Collectives™ on Stack Overflow

Reuse dropdown function in jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related