select下拉复选

最新推荐文章于 2024-06-11 16:39:30 发布
最新推荐文章于 2024-06-11 16:39:30 发布
阅读量7.4k 收藏 19
点赞数 4
分类专栏： js 文章标签： select下拉多选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nayi_224/article/details/86136785
版权

先发一下我想要的效果
在这里插入图片描述
大概就是这个样子。

原版

就是在select标签上添加multiple="multiple"属性，多选需要借助ctrl与shift键。写法简单，但是效果吗…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select multiple="multiple" style="width: 100px;">
			<option value ="1">1</option>
			<option value ="2">2</option>
			<option value ="3">3</option>
			<option value ="4">4</option>
		</select>
	</body>
</html>

在这里插入图片描述
开玩笑一样的样式，真的有甲方能同意吗？

jquery.multiselect

下载地址：https://github.com/ehynds/jquery-ui-multiselect-widget

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="../../css/jmulti/jquery.multiselect.css" />
		<link rel="stylesheet" type="text/css" href="../../css/jmulti/prettify.css" />
		<link rel="stylesheet" type="text/css" href="../../css/jmulti/style.css" />
		<link rel="stylesheet" type="text/css" href="../../css/jmulti/jquery-ui.css" />

		<script src="../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jmulti/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jmulti/jquery.multiselect.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jmulti/prettify.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jmulti/widget.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">

		</style>

		<script type="text/javascript">
			$(function() {
				$("#select_users1").multiselect({
					noneSelectedText: "",
					checkAllText: "全选",
					uncheckAllText: '全不选',
					selectedList: 5

				});

				$("#select_users2").multiselect({
					noneSelectedText: "",
					checkAllText: "全选",
					uncheckAllText: '全不选',
					selectedList: 5

				});

			});
			
			function ck(){
				alert(jQuery("#select_users2").val());
			}

		</script>
	</head>
	<body>

		<select name="Users" multiple="multiple" id="select_users1">
			<option value="1" selected="selected">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
		</select>

		<select name="Users" multiple="multiple" id="select_users2">
			<option value="1a">1a</option>
			<option value="2a">2a</option>
			<option value="3a">3a</option>
			<option value="4a">4a</option>
			<option value="5a">5a</option>
			<option value="6a">6a</option>
			<option value="7a">7a</option>
		</select>

<input type="button" id="input1" value="test" onclick="ck();" />

	</body>
</html>

效果
在这里插入图片描述

freejs .net

在这里插入图片描述
好像要收费的样子，没有仔细研究。

wenzhixin_multiple-select

https://github.com/wenzhixin/multiple-select
git上随便找的，好像挺简单的样子。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/wenzhixin_multiple-select/multiple-select.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../../../css/wenzhixin_multiple-select/multiple-select.css"/>
	<style type="text/css">
select {
  width: 500px;
}
	</style>
	</head>
	<body>
<select multiple="multiple">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>

<input type="button" name="" id="" value="test" onclick="ck();" />

<script>
  (function mounted() {
    $('select').multipleSelect();
  })();
  
  function ck(){
	  alert($('select').val());
  }
</script>

	</body>
</html>

git上还有大量相关代码 https://github.com/search?q=multiple-select

自己写的

自用，修改方便，并且能避免各种各样的兼容问题。

通过查看大量代码，发现一般的套路就是，需要自己写一个正常select标签，然后调用某个方法，将select隐藏，并在下面生成由li组成的下拉列表。一般都是这样的格式
在这里插入图片描述

按照这种套路，写了一个（未添加css）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

	<!-- 完全通过_yflag属性区分类别 -->
	<div _yflag="multiDiv" id="testdiv1">
		<input _ymultiId="id1" type="text" value="" _yflag="multiInput">
		<!-- 可以回显 -->
		<input _ymultiId="id1" type="hidden" value="1;2" _yflag="trueVal_multi" >
		<div style="display: none;width: 200px;background: #FFFFFF;margin: -10px; padding: 0px;" 
			_yflag="multiSelectDiv">
			<ul style="list-style-type:none;padding-left: 5px;">
				<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="1" name="box_id1_Type" /><span _yflag="liShowDesc">aaaa</span></li>
				<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="2" name="box_id1_Type" /><span _yflag="liShowDesc">bbbb</span></li>
			</ul>
		</div>
	</div>
	
	<div _yflag="multiDiv" id="testdiv2">
		<input _ymultiId="id2" type="text" value="" _yflag="multiInput">
		<input _ymultiId="id2" type="hidden" value="" _yflag="trueVal_multi" >
		<div style="display: none;width: 200px;background: #FFFFFF;margin: -10px; padding: 0px;" 
			_yflag="multiSelectDiv">
			<ul style="list-style-type:none;padding-left: 5px;">
				<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="1" name="box_id1_Type" /><span _yflag="liShowDesc">aaaa</span></li>
				<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="2" name="box_id1_Type" /><span _yflag="liShowDesc">bbbb</span></li>
			</ul>
		</div>
	</div>	
	
	<input type="button" name="" id="" value="test" onclick="ck();" />

	<script type="text/javascript">
	
		jQuery("[_yflag='multiDiv']").click(function(event){
	  		var ev = event || window.event;
	  		if (ev.stopPropagation) {
	   			ev.stopPropagation();
	  		}else{
	   			ev.cancelable = true;
	  		}
	  		jQuery(this).find("[_yflag='multiSelectDiv']").css("display","block");
	 	});
	 	
	 	jQuery(document).click(function(){
			jQuery("[_yflag=multiSelectDiv]:visible").each(function(i){
				refrashMultiDiv(jQuery(this).parent(), 'no');
			});
	  		jQuery("[_yflag=multiSelectDiv]").css("display","none");
	 	});

		function refrashMultiDiv(thisObj, isInit){
			var valTemp = "";
			var trueVal = thisObj.find("[_yflag='checkbox']:checked").each(function(i){
				valTemp += jQuery(this).val() + ";";
			});
			if(valTemp)
				valTemp = valTemp.substr(0, valTemp.length - 1);
			
			if(isInit == 'yes'){
				trueVal = thisObj.find("[_yflag='trueVal_multi']").val();
			}else {
				trueVal = valTemp;
			}
			
	 		if(!trueVal)
	 			return clearThisObj(thisObj);
	 		
	 		var valArr = trueVal && trueVal.split(";");
	 		if(!valArr)
	 			return clearThisObj(thisObj);
	 			
	 		var showDesc = "";
	 		var hideVal = "";
		
	 		thisObj.find("[_yflag='multiLi']").each(function(i){
	 			for(var j = 0; j < valArr.length; j++){
	 				if(jQuery(this).find("[_yflag='checkbox']").val() == valArr[j]){
	 					jQuery(this).find("[_yflag='checkbox']").attr("checked",true);
	 					showDesc += jQuery(this).find("[_yflag='liShowDesc']").html() + ";";
	 					hideVal += jQuery(this).find("[_yflag='checkbox']").val() + ";";
	 				}
	 			}
	 		});
	 		
	 		if(showDesc){
	 			thisObj.find("[_yflag='multiInput']").val(showDesc.substr(0, showDesc.length - 1));
	 		}
	 		if(hideVal){
	 			thisObj.find("[_yflag='trueVal_multi']").val(hideVal.substr(0, hideVal.length - 1));
	 		}
		}
		
		function clearThisObj(thisObj){
			thisObj.find("[_yflag='multiInput']").val("");
			thisObj.find("[_yflag='trueVal_multi']").val("");
		}

	 	(function initMulti(){
	 		jQuery("[_yflag='multiDiv']").each(function(i){
	 			var thisObj = jQuery(this);
	 			refrashMultiDiv(thisObj, 'yes');
	 		});
	 	})();
		
		function ck(){
			alert(jQuery("[_ymultiId='id1'][_yflag='trueVal_multi']").val());
		}
	</script>  

	</body>
</html>
nayi_224
关注
  • 4
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】表单 select 对象 和 checkbox 复选框
'Ablaze 的专栏
03-08 1548
　　脚本编程最复杂的表单控件是 select 元素对象。select 对象其实是一个包含 option 对象数组的复合对象。此外，可在 HTML 中建立这个对象，把它显示为 下拉列表 或者 滚动列表，滚动列表可以配置为允许进行多选。 　　有些属性可用于整个 select 对象，其他属性则仅用于 select 对象中的单个选项。如果想要确定用户选择了哪一项，且编码处理最广泛的浏览器，就必须使用 s...
select multiple复选框的写法
weixin_40945354的博客
02-19 684
<!DOCTYPE html> <html> <div id="app"> <select v-model="searches" multiple> <option v-for="option in options" :value="option.value">{{ option.text }}</option> </select> </div>
HTML select 标签 下拉复选
qq_37203082的博客
04-07 2764
存于世，必要拯救世界，希望的灯光也需要积累。 记之已身，学以致用，欢迎转载，更多联系QQ:289325414 通过JS和CS 使select标签可以多选，前提需要加载JS和CSS，以及JQ。 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
select下拉框如何实现多选功能
最新发布
weixin_51609337的博客
06-11 356
【代码】select下拉框如何实现多选功能。
select下拉框添加复选框功能
m0_62988771的博客
10-09 1744
*参考el-select多选对号样式实现checkbox中对号的样式*/placeholder="请选择"/*参考el-checkbox实现checkbox样式*//*清空原来的多选框样式*//*设置置灰内容样式*/
如何在select中option添加复选框
热门推荐
H华华的博客
01-08 2万+
.outlayer{ width:60% ; height:400px; border:1px solid blue; margin-left:20%; margin-right:20%; text-align:center } .list{ margin-top:5px; margin-left:4%; margin-right:4%; floa
select下拉复选框的做法
自己选择的路，跪着也要走
05-30 1224
主要用到（multiple）这个属性，对于 windows：按住 Ctrl 按钮来选择多个选项， 可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。 实例如下： 处理1 处理2 处理3 处理4
如何在select下拉列表中添加复选框?
weixin_33800593的博客
12-30 1785
　　近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接到这样的要求时我也蒙了,于是去网上查相关资料,查了好久,查不出个结果,只好自己用纯html css jq去做一个仿下拉列表中自带复选框的效果,代码如下,可直接复制去查看效果, 注:(以下代码为本...
Select多选
web
12-03 5786
今天写这个select多选，明明很简单的功能，but，因为功能稍微有点复杂，我又粗心大意，导致我的bug不断，整个功能写完后，感觉自己咋就那么蠢呢？啊！气死了，我要反思 我的是angular2项目，使用的NG-ZORRO组件库 普通的select多选 先了解官网的代码 官网示例 官网代码 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-select-multiple', temp
el-select多选全选
熙冰
02-11 7126
<template> <div> <el-select @change="handleSelect($event)" v-model="selectVal" placeholder="请选择" multiple collapse-tags> <el-option v-for="item in array" ...
Axure 9 设计之Select下拉复选框效果教程（中继器）
01-17
Axure 9 设计之Select下拉复选框效果（中继器）、教程、中继器、axure、交互设计
Axure设计之Select下拉复选框教程（中继器）
07-03
在系统表单设计中经常用到下拉复选框，下拉复选列表用于展示可选标签，并允许用户选择多个标签，那么该如何利用Axure RP9制作一个下拉复选框呢？本文总结了设计过程的所需元件和整体思路，通过对关键步骤的讲解，...
bootstrap-select下拉复选框.rar
01-19
压缩包中的“下拉复选框”可能包含了示例代码、CSS样式、JavaScript文件和文档，帮助开发者快速理解和使用Bootstrap Select。通过研究这些文件，你可以更深入地了解如何配置和自定义插件，以满足项目需求。 总之，...
SelectBox下拉复选框多选插件
06-24
在IT领域，尤其是在前端开发中，"SelectBox下拉复选框多选插件"是一种常用的用户界面元素，用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性，使得在有限的空间内，用户能够方便地筛选和...
JS select标签复选
04-07
然而，标准的 `<select>` 标签默认只支持单选，但通过 JavaScript（JS） 和 jQuery（JQ） 的帮助，我们可以实现多选功能，即复选。这里将详细讲解如何实现 `JS select 标签复选`。 首先，我们需要一个基本的 HTML ...
html的select下拉复选框,jquery sumoselect 插件实现 select下拉 复选框
weixin_36016360的博客
06-03 636
jquery sumoselect 插件实现 select下拉 复选框,这是国外的大牛写的,参考网站如下:http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html 官方demo网站http://hemantnegi.github.io/jquery.sumoselect/ 官网的方法使用说明.1.只需要导入js和cs...
select 下拉框多选，用select代替checkbox
那些年的代码
09-15 2012
分类：JS技巧jQuery 演示：http://www.freejs.net/demo/524/index.html <select class="demo" multiple="multiple"> <optgroup label="Languages"> <option value="cp">C++...
使用下拉列表框进行多选
weixin_43235645的博客
12-07 3889
使用下拉列表框进行多选 下拉列表也可以进行多选操作，在&lt; select &gt;标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。 语法：&lt;select multiple="multiple"&gt; 使用...
select下拉框多选取值
Mw_blooming的博客
12-13 1820
本来是单选取值，现改为多选   其中&lt;select&gt; 标签新增multiple属性，如&lt;select id = "sel"  multiple = "multiple"&gt; 取值： 单选时 var award =  $("#sel").val() 这取的时候option中value属性的值 多选时 var award =  $("#sel").val().toS
html下拉复选框代码
07-14
### 回答1： 下面是一个HTML下拉复选框的例子： ```html <select multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> <option value="option4">选项4</option> <option value="option5">选项5</option> </select> ``` 这段代码创建了一个下拉复选框。使用`<select>`标签来定义下拉复选框，添加`multiple`属性可以让用户选择多个选项。在`<select>`标签中添加`<option>`标签来定义选项。每个`<option>`标签都有一个`value`属性来指定选项的值，以便后台处理。在`<option>`标签中添加文本作为选项的显示内容。 用户可以按住Ctrl键或Shift键并单击来选择多个选项。选择的选项会被以相应的值发送到服务器端进行处理。 如果要对选项进行预先选择，可以在`<option>`标签中添加`selected`属性，例如：`<option value="option1" selected>选项1</option>`。 这只是一个简单的例子，实际应用中可根据需求进行更复杂的设计和功能扩展，例如添加样式、绑定事件等。可以通过CSS样式来美化下拉复选框，也可以使用JavaScript重新设计其功能和行为。 ### 回答2： HTML下拉复选框是一种表单元素，它允许用户在给定的选项中进行多选。下面是一个示例的HTML代码，用于创建一个下拉复选框： <select multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> 在这个代码中，`<select>`元素用于创建下拉复选框。`multiple`属性被添加到`<select>`元素中，以允许用户选择多个选项。每个选项由`<option>`元素定义，其中`value`属性指定选项的值，用于提交表单数据。在`<option>`元素内部，可以添加文本内容，用于显示给用户。 用户可以通过按住Ctrl键（在Windows系统中）或Command键（在Mac系统中）来选择多个选项。所选选项将以选中的状态呈现给用户。通过表单提交，我们可以获取到用户所选择的所有选项的值。 需要注意的是，这只是一个基本的示例，你可以根据自己的需求自定义选项内容和显示样式。为了增加用户体验，可以使用CSS样式对下拉复选框进行美化。可以使用JavaScript来增加一些行为，例如根据用户的选择显示或隐藏其他元素。 总而言之，HTML下拉复选框是一种很实用的表单元素，可以满足用户在给定选项中选择多个选项的需求。 ### 回答3： HTML下拉复选框是一种常用的用户界面元素，它允许用户从下拉列表中选择一个或多个选项。下面是一个简单的HTML下拉复选框的代码示例： ```html <select multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> <option value="option4">选项4</option> </select> ``` 在上面的代码中，`<select>`标签表示下拉复选框，`multiple`属性表示允许选择多个选项。每个选项都使用`<option>`标签来定义，在`value`属性中指定选项的值，显示在选项旁边的文本在`<option>`标签的起始和结束标签之间。 使用这个HTML下拉复选框代码，用户可以单击并选择一个或多个选项，按住Ctrl键（Windows）或Command键（Mac）选择多个选项。可以通过设置`selected`属性来预先选择一些选项，只需在对应的`<option>`标签上设置`selected`属性即可。 带有下拉复选框的HTML表单可以用于收集多个选项的用户选择，例如用户可以选择多个兴趣爱好、多个商品等。收集到的用户选择数据可以通过后端编程语言来处理和存储。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值