2013-03-05 21 views
0

我使用此功能与无序列表(<ul>)为了复制选择下拉元素的功能。该功能在指定的容器中检查时正确显示用户选定的值,但未选中某项时不会将其删除。修改此功能以删除值,如果它们未选中

我已经包括下面的相关片段,并贴有完整的代码在这里工作的例子:http://jsfiddle.net/chayacooper/GS8dM/7/

JS

$(document).ready(function() { 
    $(".dropdown_box").click(function() { 
     $("#select_colors").show(); 
    }); 

    $(".dropdown_container ul li").click(function() { 
     var text = $(this.children[0]).find("input").val(); 
     var currentHtml = $(".dropdown_box span").html();   
     $(".dropdown_box span").html(currentHtml.replace('Colors', '')); 
     $(".dropdown_box span").append(', ' + text);    
    }); 
}); 

HTML

<div class="dropdown_box"><span>Colors</span></div> 
<div class="dropdown_container"> 
    <ul id="select_colors"> 
     <li><label><a href="#"><input type="checkbox" name="color[]" value="Black" />Black</a></label></li> 
    </ul> 
</div> 
+1

您看不到您正在检查点击事件后是否已经选择了当前值。 – 2013-03-05 03:10:21

+1

你的HTML在那个小提琴中是一团糟。这里(主要是?)清理:http://jsfiddle.net/GS8dM/9/ – isherwood 2013-03-05 03:13:27

回答

0

你应该给容器id到函数。然后,在添加选择的文本之前,您应该确保它不在文本中。如果是,请删除它。

相关问题