我将此函数与无序列表一起使用(<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>