jQuery实现下拉列表复选框 可多选

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赋值

   })

 

 

参考：https://blog.csdn.net/zyb112211/article/details/80021170?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-80021170-blog-101476214.t5_layer_eslanding_A_4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-80021170-blog-101476214.t5_layer_eslanding_A_4&utm_relevant_index=3