jQuery实现下拉列表复选框,可多选, 将选择的value值以逗号隔开,存到input文本框 id=checkedVal。
取消选择时,采用直接替换为空的方式删除,适用于选项值无重复的情况。
<div class="dropup" style="position: relative;">
<button class="btn btn-default dropdown-toggle form-control select_multiple" style="width: 100%;margin-left: 0px;" type="button" id="dropdownMenu21" data-toggle="dropdown">
<span class="select_text" data-is-select="false">--请选择--</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown_item" style="bottom: auto;">
<li><input type="checkbox" class="check_box" value="aa" /> <span>Action</span></li>
<li><input type="checkbox" class="check_box" value="bb"/> <span>Another action</span></li>
<li><input type="checkbox" class="check_box" value="cc"/> <span>Something else here</span></li>
<li><input type="checkbox" class="check_box" value="dd"/> <span>Separated link</span></li>
</ul><!-- 为了方便演示,type设置text了,实际中可以设置成hidden -->
<input type="text" name="" class="select_val" id=checkedVal/>
</div>
//录入方式多选下拉复选框实现
$(document).on("click",".check_box",function(event){
event.stopPropagation();//阻止事件冒泡,防止触发li的点击事件
//console.log("checked:",$(this).prop("checked"));
//勾选的项名称
var $selectTextDom=$(this).parent("li").parent("ul").siblings("button").children(".select_text");
//勾选项的值
var $selectValDom=$(this).parent("li").parent("ul").siblings(".select_val");
var isSelected = $(this).prop("checked");
console.log("isSelected:",isSelected);
var selectText = $selectTextDom.val();//文本值,用于显示
var selectVal = $selectValDom.val();//实际值,会提交到后台的
var selected_text = $(this).siblings("span").text();//当次勾选的文本值
var selected_val = $(this).val();//当次勾选的实际值
//判断是否选择
if(isSelected==true){
console.log("selectVal:",selectVal);
console.log("selectText:",selectText);
if (selectVal == ""){
selectText=selected_text;
selectVal=selected_val;
}
else {
selectText += ","+selected_text; //加入选择的text
selectVal += ","+selected_val; //加入选择的值val
}
console.log("selectVal:",selectVal);
console.log("selectText:",selectText);
}
else{
//取消选择
selectText=selectText.replace(selected_text,"").replace(",,",",");//替换掉
selectVal=selectVal.replace(selected_val,"").replace(",,",",");//替换掉
//判断第一个字符是否是逗号
if(selectText.charAt(0)==","){
//去除开头逗号
selectText=selectText.substring(1,selectText.length);
selectVal=selectVal.substring(1,selectVal.length);
}
//判断最后一个字符是否是逗号
if(selectText.charAt(selectText.length - 1)==","){
//去除末尾逗号
selectText=selectText.substring(0,selectText.length - 1);
selectVal=selectVal.substring(0,selectVal.length - 1);
}
}
$selectTextDom.val(selectText);
$selectValDom.val(selectVal);
$('#checkedVal').val(selectVal); //val赋值
})