實現下拉選單多選框效果
阿新 • • 發佈：2018-11-27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <li>工作意願地： <%-- <c:forEach items="${list}" var="list"> <input type="checkbox" value="${list.name}" id="wantPlace" name="wantPlace" <c:if test="${fn:contains(gzyyd,list.name) }" >checked="true"</c:if> />${list.name } </c:forEach> --%> <input type="text" id="intvUnidName" name="intvUnidName" readonly="readonly"></input> <div style="position:relative"> <input type="hidden" id="intvUnid" name="intvUnid"></input> <ul style="left: 115px;display: none; width:57%;height: 150px;overflow: auto;list-style: none; position:absolute; background:white;padding-left:10px; border:1px solid #999; z-index:1" id="intvUnidUl" class="intvCheck"> <c:forEach items="${list}" var="list"> <li> <input type="checkbox" name="checkboxIntvUnid"/> <span data-value="${list.name}">${list.name}</span> </li> </c:forEach> </ul> </div> </li> <script> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } $("#intvUnidName").on("click",function(e){ if($("#intvUnidUl").css("display")=="none"){ $("#intvUnidUl").show(); stopPropagation(e); }else{ $("#intvUnidUl").hide(); stopPropagation(e); } }) $("#intvUnidUl").on("click", 'input[name=checkboxIntvUnid]', function(e){ var name = $(this).next().attr("checked",'true').html(); var id = $(this).next().attr("checked",'true').attr("data-value"); intvUnidName = $("#intvUnidName").val(); intvUnid = $("#intvUnid").val(); if($(this).prop("checked")) { if($(this).length>0){ if(intvUnidName.indexOf("," +name)!=-1){ return ; stopPropagation(e); }else{ intvUnidName += "," + name; intvUnid += ";" + id; stopPropagation(e); } }else{ intvUnidName ="," + name; intvUnid = ";" + id; stopPropagation(e); } }else{ if(intvUnidName.indexOf("," + name) != -1){ intvUnidName = intvUnidName.replace("," + name,""); intvUnid = intvUnid.replace(";" + id,""); stopPropagation(e); }else{ intvUnidName = intvUnidName.replace( name,""); intvUnid = intvUnid.replace( id,""); stopPropagation(e); } } if($.trim(intvUnidName).charAt(0)==","){ intvUnidName = intvUnidName.substring(1) ; } if($.trim(intvUnid).charAt(0)==";"){ intvUnid = intvUnid.substring(1) ; stopPropagation(e); } $("#intvUnidName").val(intvUnidName); $("#intvUnid").val(intvUnid); stopPropagation(e); }) </script> </html> <input style="width:57%" type="text" id="cityName" name="cityName" readonly="readonly" value="${gzyyd}"></input> <div style="position:relative"> <ul id="menuUl" class="cityNameCheck" style="left: 115px;display: none; width:57%;height: 150px;overflow: auto;list-style: none; position:absolute; background:white;padding-left:10px; border:1px solid #999; z-index:1"> <c:forEach items="${list}" var="list"> <li> <input type="checkbox" value="${list.name}" id="wantPlace" name="wantPlace" <c:if test="${fn:contains(gzyyd,list.name) }" >checked="true"</c:if> /> <span data-value="${list.name}">${list.name}</span> </li> </c:forEach> </ul> </div> <script type="text/javascript"> // 冒泡點選事件 function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } // 點選顯示隱藏下拉選單多選框 $("#cityName").on("click",function(e){ if($("#menuUl").css("display")=="none"){ $("#menuUl").show(); stopPropagation(e); }else{ $("#menuUl").hide(); stopPropagation(e); } }) // 獲取點選多選複選框值 $("#menuUl").on("click", 'input[name=wantPlace]', function(e){ // 監聽獲取多選框選中的值： var name = $(this).next().attr("checked",'true').html(); // 監聽獲取選中data-value屬性的值： var id = $(this).next().attr("checked",'true').attr("data-value"); cityName = $("#cityName").val(); // 如果選擇複選框執行以下操作;則去執行不選擇複選框操作。 if($(this).prop("checked")) { if($(this).length>0){ console.log($(this).length); if(cityName.indexOf("," +name)!=-1){ console.log(cityName.indexOf("," +name)); return ; stopPropagation(e); }else{ cityName += "," + name; console.log(cityName); stopPropagation(e); } }else{ cityName ="," + name; stopPropagation(e); } }else{ console.log("ddd"); if(cityName.indexOf("," + name) != -1){ cityName = cityName.replace("," + name,""); stopPropagation(e); }else{ cityName = cityName.replace( name,""); stopPropagation(e); } } // 如果選擇一個，去掉逗號 if($.trim(cityName).charAt(0)==","){ cityName = cityName.substring(1) ; } $("#cityName").val(cityName);//賦值 stopPropagation(e); }) // 處理點選任意處隱藏下拉選單 $(window).click(function(){ $(".cityNameCheck").hide(); }) </script> 例項：一 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <link href="css/denglu.css" rel="stylesheet" type="text/css"> <script src="js/jquery.js"></script> <script src="js/rem.js"></script> <title>下拉選單多選框效果</title> </head> <body> <!-- 內容選項 --> <span>我是下拉選單多選：</span> <input type="text" id="intvUnidName" name="intvUnidName" readonly="readonly"></input> <div style="position:relative"> <input type="hidden" id="intvUnid" name="intvUnid"></input> <ul style="left: 115px;display: none; width:57%;height: 150px;overflow: auto;list-style: none; position:absolute; background:white;padding-left:10px; border:1px solid #999; z-index:1" id="intvUnidUl" class="intvCheck"> <li> <input type="checkbox" name="checkboxIntvUnid"/> <span data-value="1">1</span> </li> <li> <input type="checkbox" name="checkboxIntvUnid"/> <span data-value="1">2</span> </li> <li> <input type="checkbox" name="checkboxIntvUnid"/> <span data-value="1">3</span> </li> </ul> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } $("#intvUnidName").on("click",function(e){ if($("#intvUnidUl").css("display")=="none"){ $("#intvUnidUl").show(); stopPropagation(e); }else{ $("#intvUnidUl").hide(); stopPropagation(e); } }) $("#intvUnidUl").on("click", 'input[name=checkboxIntvUnid]', function(e){ var name = $(this).next().attr("checked",'true').html(); var id = $(this).next().attr("checked",'true').attr("data-value"); intvUnidName = $("#intvUnidName").val(); intvUnid = $("#intvUnid").val(); if($(this).prop("checked")) { if($(this).length>0){ if(intvUnidName.indexOf("," +name)!=-1){ return ; stopPropagation(e); }else{ intvUnidName += "," + name; intvUnid += ";" + id; stopPropagation(e); } }else{ intvUnidName ="," + name; intvUnid = ";" + id; stopPropagation(e); } }else{ if(intvUnidName.indexOf("," + name) != -1){ intvUnidName = intvUnidName.replace("," + name,""); intvUnid = intvUnid.replace(";" + id,""); stopPropagation(e); }else{ intvUnidName = intvUnidName.replace( name,""); intvUnid = intvUnid.replace( id,""); stopPropagation(e); } } if($.trim(intvUnidName).charAt(0)==","){ intvUnidName = intvUnidName.substring(1) ; } if($.trim(intvUnid).charAt(0)==";"){ intvUnid = intvUnid.substring(1) ; stopPropagation(e); } $("#intvUnidName").val(intvUnidName); $("#intvUnid").val(intvUnid); stopPropagation(e); }) </script> </body> </html> 例項二 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} #wrap{ width: 500px; height: 500px; border: 1px solid blue; margin: 100px auto; } #selectBoard{ width: 300px; height: 20px; border: 1px solid black; border-radius: 5px; position: relative; margin: 30px auto; } #selectBoard ul{ width: 300px; background: white; position: absolute; top: -10px; left: -10px; border: 1px solid red; border-radius: 5px; display: none; } #selectBoard ul li{ list-style: none; } #selectBoard ul li:hover{background: dodgerblue;} #selectBoard img{ position: absolute; right: 0; top: 0; width: 30px; } </style> </head> <body> <div id="wrap"> <div id="selectBoard"> <ul> <li><input type="checkbox" name="" id="" value="北京" />北京</li> <li><input type="checkbox" name="" id="" value="上海" />上海</li> <li><input type="checkbox" name="" id="" value="西安" />西安</li> <li><input type="checkbox" name="" id="" value="石家莊" />石家莊</li> </ul> <span id="shuju"></span> </div> </div> </body> </html> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> //定義一個空陣列去接收value值 var arr = []; //仿select的點選事件 $("#selectBoard").click(function(event){ var ev = event || window.event; //阻止預設事件及封裝 if (ev.stopPropagation) { ev.stopPropagation(); }else{ ev.cancelable = true; } $("#selectBoard ul").css("display","block"); }); $(window).click(function(){ $("#selectBoard ul").css("display","none"); }); //監聽checkbox的value值 改變則執行下列操作 $("input").change(function(){ if ($(this).prop("checked")) { arr.push($(this).val()+","); console.log(arr); }else{ arr.shift($(this).val()+","); } $("#shuju").html(arr); }); </script>