文档章节

实现下拉菜单多选框效果

lanjian28
 lanjian28
发布于 10/16 23:06
字数 1198
阅读 11
收藏 0
<!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>

 

© 著作权归作者所有

共有 人打赏支持
lanjian28
粉丝 3
博文 30
码字总数 25099
作品 0
海口
后端工程师
私信 提问
bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

引入问题 之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知的比较强大的下拉框插件bootstrap-select2,博主当时也参考过,但是发现它的多选...

Airey
09/19
0
0
4 个多才多艺的 jQuery 下拉菜单插件

这里我们收集了 4 个最棒的 jQuery 下拉菜单插件,提供很多特性,例如自动完成、搜索、标签、多选、ajax 等。 1. ddSlick ddSlick 是一个轻量级的 jQuery 插件用来实现定制的下拉组件。 2. D...

oschina
2012/06/07
12.8K
18
bootstrap 3, 全局样式、组件 学习总结。

全局样式css 概览 移动设备优先 布局容器 栅格系统 .row > .col- 列必须包含在行内, 默认12列 根据媒体查询将列前缀分为4种 列偏移 col-lg-offset- 表示向右偏移列。 排版 对齐: .text-left...

horacerain
2016/11/02
50
0
Element源码分析系列7-Select(下拉选择框)

简介 Element的下拉选择器示意图如下 确实做的很漂亮,交互体验非常好,html有原生的选择器,但是太丑了,而且各浏览器样式不统一,因此要做一个漂亮且实用的下拉选择器必须自己模拟全部方法...

超级索尼子
08/25
0
0
jquery 表单取值常用代码

jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr("disabled",true);//设为不可用 $("#form1"......

夏日晚晴天
2014/01/16
0
2

没有更多内容

加载失败,请刷新页面

加载更多

JVisualVM监控远程jar包运行情况

1.准备一个jar文件,需要放到服务器上有运行 tuyou-user-SNAPSHOT-0.0.1.jar 2.上传至服务器,启动jar文件: nohup java -Djava.rmi.server.hostname=192.168.104.135 -Dcom.sun.management...

日落北极
16分钟前
2
0
ReentrantReadWriteLock 源码

ReentrantReadWriteLock有五个内部类,五个内部类之间也是相互关联的。内部类的关系如下图所示。 如上图所示,Sync继承自AQS、NonfairSync继承自Sync类、FairSync继承自Sync类;ReadLock实现...

狼王黄师傅
17分钟前
3
0
详解netty原理分析

Netty是一个高性能、异步事件驱动的NIO框架,它提供了对TCP、UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用户可以方便的主动...

小刀爱编程
24分钟前
2
0
Vue props用法小结

Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件;子组件通过 events...

peakedness丶
27分钟前
3
0
pycharm 教程(一)安装和首次使用

pycharm 教程(一)安装和首次使用 2017-12-05 09:19 by 菜鸟飞呀飞, 134207 阅读, 1 评论, 收藏, 编辑 PyCharm 是我用过的python编辑器中,比较顺手的一个。而且可以跨平台,在macos和windo...

linjin200
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部