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的（選擇/取消）的另一部分的一些問題，但我真的不知道你想做什麼。