Question

我正在将此函数与无序列表(<ul>)一起使用，以便复制Select下拉元素的功能。该函数在检查时正确显示用户在指定容器中的选定值，但在未选中项目时不会将其删除。

我在下方添加了相关代码段，并在此处发布了一个包含完整代码的工作示例：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>

Answer 1

您应该将容器ID赋予该函数。然后，在添加选择的文本之前，应确保它不在文本中。如果是，请删除它。

如果未选中，则修改此函数以删除值

1 个答案: