实现下拉菜单多选框效果

最新推荐文章于 2023-10-19 13:50:01 发布
最新推荐文章于 2023-10-19 13:50:01 发布
阅读量218 收藏
点赞数
文章标签： c/c++ javascript python ViewUI
原文链接：https://my.oschina.net/u/3482619/blog/2247673
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!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>

 

转载于:https://my.oschina.net/u/3482619/blog/2247673

weixin_34211761
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
asp.net 下拉菜单 多选框 DropDownCheckList
12-13
非常好用的下拉菜单多选框控件。 本人亲测后上传。 内含Demo，源码及文档。
element ui 下拉菜单加多选框
m0_61004873的博客
04-23 1万+
最近做一个项目，需要一个带有多选框功能的下拉菜单，还是老规矩，自己封装一个吧。很简单 写完以后打开页面测试，发现已经选中了，但是输入框并没有显示选择的值 打开vue开发工具，发现选中的值并没有放入value1中。所以当选中的时候要借助checkbox的change事件，把选中的值手动传入value1中。所以要加一个change事件。 点击多选框之后，先判断数组value1中是否存在当前选中数据，存在，获取下标删除，不存在，push进去。 效果如下。 多选的时候想要点击x号删除..
下拉多选框的实现
weixin_44357719的博客
08-14 6352
这两天在写一个chrome插件，需要在popup页使用下拉多选框。用select看起来非常原始，多选还要按住ctrl键或者command键。 html代码如下： <html> <head> <title>用select实现下拉多选框</title> </head> <body> <select class="demo" multiple="multiple">
css实现下拉菜单
ybh756784818的博客
04-12 9018
css实现下拉菜单的具体步骤，前端小白的个人理解
el-select 下拉框全选、多选的几种方式组件
最新发布
m0_67841039的博客
10-19 9421
el-select 下拉框全选、多选的几种方式组件
input:checkbox多选框实现单选效果
卡布洛技术专栏
07-24 1万+
最近遇到一个小小的问题，就是有时候我们使用单选radio的时候，会发现当我们选中一个之后，再也无法一个都不选了，即选中后没有取消的功能，此时便想到了功能强大的checkbox，但他是多选，怎么才能让他变成单选，效果跟radio一样呢，本菜鸟就自己写了个小程序，代码很简单，只有四行。 废话不多说，直接代码： 无标题文档 $(function(){ $(":checkbox").cl
下拉弹出多选框代码插件
06-01
下拉弹出多选框代码插件.
Excel下拉列表多选框实现
03-30
NULL 博文链接：https://ganliang13.iteye.com/blog/1312957
VBA设置多级下拉菜单.xlsm
06-18
VBA设置多级下拉菜单.xlsm VBA设置动态多级下拉菜单.xlsm
js css3下拉城市菜单多选代码.rar
06-03
js css3下拉城市菜单多选代码模板，由HTML+css+js完成模板
JS多选下拉框_实现多项选择
11-19
JS多选下拉框，实现多选。点击显示下拉。
jquery插件实现下拉多选checkbox的效果
11-20
jquery-ui-multiselect实现多选下拉框的效果，支持下拉多选的一个小demo
好看的复选框（Checkbox）效果
dfe3318的博客
06-24 713
在线演示 源码下载 转载于:https://www.cnblogs.com/937522zy/p/4598247.html
input多选框checkbox单选框radio的样式修改-------CSS
zhangyufeng0126的博客
11-24 4741
input多选框checkbox单选框radio的样式修改-------CSS 效果图 HTML代码 1.多选 2单选  是  否
漂亮的checkbox样式 （多选框）
热门推荐
阳光灿烂的日子
08-07 6万+
说起来汗颜，如此常用的checkbox我改变样式，居然需要百度，而且百度很久，更可气的是百度很久找不到可行的解决方案。 后来在csscheckbox.com上找到很多样式，结果一测兼容性IE不行。如此一来，耽误了很久的时间。 抄了近道屡试不行，回归JQuery UI，不用说兼容性挺好，而且样式自己随心画。 在此记录一款checkbox的样式，供大家也供我以后方便使用。 有三种状态，de
使用element-ui组件做出块状多选框效果
Tatooine
02-23 1287
先上效果图： 主要使用element-ui中的“Checkbox 多选框”组件 Checkbox 多选框 <div class="inner-drawer-content-container"> <el-checkbox-group v-model="chosenTypes"> <el-checkbox v-for="(item, index) in intentionTypes" :label="item" :key="index" border size="
【JS】复选框实现效果
Albert
10-19 793
复选框   全选/全不选 123  4 //全选 function SelectAll(obj){ //获取所有子复选框 var cboes=document.getElementsByName("cbo"); for(var i=0;i          cboes[i].checked=obj.checked; }   //选择子复选框的同时选
下拉多选框 php,jQuery自定义多选下拉框效果实现方法
weixin_36156538的博客
03-10 382
项目中需要自定义一个下拉框多选插件，业务问题还是自己实现比较好。本文主要为大家详细介绍了jQuery自定义多选下拉框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。通过$.fn 向jQuery添加新的方法下拉数据通过参数传递进去，通过调用该插件时接收，选择后的确定与取消事件采用事件传递方式代码如下：1.效果图2.代码确定取消.dropdown-container{disp...
html动态多选框,动态下拉框多选效果
weixin_42302638的博客
06-07 861
HtmlCssJs请选择您要派送的小区(多选)1清江花园香缇华府龙湖弗莱明戈香缇华府龙湖弗莱明戈绿地国际花都绿地国际花都中信未来城香门第海骏达一期海骏达二期清江别韵龙湖弗莱明戈美城云庭.ch_area {background:#fff;padding-bottom:8px;}.choose_box {width:90%;margin:0px auto;border:1px solid #ccc;b...
html实现含有下拉菜单的多选框
05-26
一种方法是在多选框旁边添加一个下拉菜单，当下拉菜单选项被选择时，将选项添加到多选框中，可以使用JavaScript来实现。 以下是一个示例代码： ```html 选择多个选项 选项1 选项2 选项3 ()">添加选项 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值