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>

Answer 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.