jQuery中的重用下拉功能

Question

我有一个无序列表，它需要与select标记相同的功能。这工作正常，但我想在每个页面上多次重复使用下拉列表，在这里事情开始陷入困境，因为选择器适用于所有列表，因此会复制每个行为和.clone()。我想我需要使用.closest()方法来防止重复，但是在哪里以及如何应用它？

感谢

Working demo

Duplicate issue demo

jQuery代码：

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

<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

也有jQuery的（选择/取消）的另一部分的一些问题，但我真的不知道你想做什么。