1. 程式人生 > >實現下拉選單多選框效果

實現下拉選單多選框效果

<!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 }&nbsp;&nbsp;&nbsp;&nbsp;
				</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>