Question

我正在复制select / multiselect元素的功能，我试图使用此功能显示在相关容器中选择的项目。我需要显示在逗号分隔列表中选择的所有值，但它目前只显示一个选择（最后一个选择）。它还会显示所选列表项的复选框，背景颜色等，而不是复选框值（即value="Black"）。

我将这个用于几个多选表单元素，我无法使用jQuery UI MultiSelect Widget，因为它们需要以非常特定的方式设置样式（选项显示背景颜色或图像并传播超过几列等。）。

我已经在下方提供了相关代码，并且我已在此处发布了样式＆f;＆＃39; -multiselect元素的工作示例：{{3 }}

JS片段

$(document).ready(function () {
    $(".dropdown_container ul li a").click(function () {
        var text = $(this).html();
        $(".dropdown_box span").html(text);
    });
    function getSelectedValue(id) {
        return $("#" + id).find("dropdown_box span.value").html();
    }
});

HTML代码段

<div class="dropdown_box"><span>Colors</span></div>

<div class="dropdown_container">
<ul>
<li><a href="#"><div style="background-color: #000000" class="color" onclick="toggle_colorbox_alt(this);" title="Black"><div class=CheckMark>&#10003;</div>
<input type="checkbox" name="color[]" value="Black" class="cbx"/></div>Black</a>
</li>
<!-- More list items with checkboxes -->
</ul>
</div>

我已尝试了其他几种方法（包括此处列出的许多方法：http://jsfiddle.net/chayacooper/GS8dM/2/），但这些方法都没有使用隐藏的复选框和/或我需要以这些特定形式合并的其他功能元件。

Answer 1

好吧，从更改开始点击文档。中的单击（..）{..}

$(".dropdown_container ul li a").click(function () {
    var text = $(this).html();
    var currentHtml = $(".dropdown_box span").html(); 
    var numberChecked = $('input[name="color[]"]:checked').length;
    $(".dropdown_box span").html(currentHtml.replace('Colors','')); 
    if (numberChecked > 1) { 
        $(".dropdown_box span").append(', ' + text); 
        } else { 
        $(".dropdown_box span").append(text); 
    }
});

这将正确附加文本。但是我无法理解代码中图像的处理。

更新，只处理值：用

替换var text = $(this).html();

var text = $(this).find("input").val();

Answer 2

触发click事件时，只需抓取复选框的所有值，然后将值附加到span即可。像http://jsfiddle.net/9w95b/

一样

我还建议不要将<input>标记放在<a>标记内。

修改此函数以显示所有选中的复选框的值（而不是最后选择的值）

2 个答案: