CODEWITHSUNDEEP
javascriptjqueryfunction
user1901096
user1901096

Reputation: 247

Reuse dropdown function in jQuery

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>

Upvotes: 0

Views: 496

Answers (1)

isherwood
isherwood

Reputation: 61063

$(".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.

Upvotes: 1

Related Questions