如何在select下拉列表中添加复选框?
近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接到这样的要求时我也蒙了,于是去网上查相关资料,查了好久,查不出个结果,只好自己用纯html css jq去做一个仿下拉列表中自带复选框的效果,代码如下,可直接复制去查看效果,
注:(以下代码为本人自己编写,只是一个小Demo,可以直接复制使用,但代码只是演示其效果和功能,告诉大家如何去写,所以界面可能没大家想要的那么漂亮!敬请谅解!0.0.)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4a8a01 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #698906 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; min-height: 22.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606; min-height: 22.0px }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #929151 }
span.s8 { color: #060606 }
span.s9 { color: #ad42ef }
span.s10 { color: #4a8a01 }
span.s11 { color: #698906 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #b58a00 }
span.Apple-tab-span { white-space: pre }
<!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>
欢迎大家提出建议!!
如何在select下拉列表中添加复选框?的更多相关文章
- 【Telerik】实现列表单元格中添加复选框,进行状态(是、否)判断
前台界面: 需求:实现对每条细则是否必备进行判断,必备就勾选,否则不勾选. 首先:要保证列表GridView是可编辑的(IsReadOnly=false) 表格代码 其次:单元格的数据绑定要保证是双向 ...
- QListWidget的QComboBox下拉列表添加复选框及消息处理
要在QComboBox下拉列表项中添加复选框,并进行消息处理,在网上搜索了很久没有找到太多有用的信息和实际的例子,但从中还是找到了一些提示性的资料,根据这些简短的介绍,最终实现了这个功能. QComb ...
- Jquery Datatable添加复选框,实现批量操作。
最近一段时间,一直在写前端的东西,自己也不擅长,最近也有所长进,把工作中用到的一些前端知识整理一下,下次用到就不用再找了.这次主要是在datatable中添加复选框,然后实现批量操作的功能.因为是公司 ...
- asp.net,根据gridview 中checkbox复选框选中的行对数据库进行操作
在asp.net中,使用checkbox,对gridview添加复选框. 多选数据行后,根据已选数据,对原数据进行多条语句查询. string sql = "Select * from 表 ...
- nodetree中 前面复选框禁用插件
nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...
- Qt之QHeaderView添加复选框
简述 前面分享了QTableView中如何添加复选框.本节主要介绍QTableView中的表头-QHeaderView添加复选框的功能,下面以水平表头为例,垂直表头类似! 简述 效果 QHeaderV ...
- 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- dojo:为数据表格添加复选框
一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ default ...
- Js动态添加复选框Checkbox
Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...
随机推荐
- vector
.vector是一个能够存放任意类型的动态数组,能够增加和压缩数据. .vector容器最擅长的工作是: 利用位置索引存储容器中的单个元素. 以任何顺序迭代容器中的元素. 在容器的末尾追加和删除元素. ...
- VC++/MFC 最常用宏和指令
1.#include指令 包含指定的文件,最基本的最熟悉的指令,编程中不得不用,包含库文件用双尖括号,包含自定义头文件用双引号. 2.#define指令 预定义,通常用它来定义常量(包括无参量与 ...
- FileUtil(from logparser)
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.ByteArrayOutputStream; ...
- swift项目导入OC框架
手动导入框架步骤: 1.将框架拖入项目 2.新建桥接文件 3.build setting->bridge 添加桥接文件路径,相对项目而言
- MyEclipse 常用快捷键
MyEclipse 常用快捷键 编辑: Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等) Ctrl+Shift+F 格式化当前代码 ...
- UML大战需求分析——阅读笔记06
状态机图和活动图在样子比较相似,但状态机图是用来为对象的状态及造成状态改变的事件建模.我们大二学习UML统一建模语言状态机图模块时了解到,UML的状态机图主要用于建立对象类或对象的动态行为模型,描述系 ...
- Java中的URL类
Java的网络类可以让你通过网络或者远程连接来实现应用.而且,这个平台现在已经可 以对国际互联网以及URL资源进行访问了.Java的URL类可以让访问网络资源就像是访问你本地的文件夹一样方便快捷.我们 ...
- oracle内存粒度
一,什么是内存粒度? When a database instance starts up, the amount of memory allocated is determined by the a ...
- 阿里云服务器上开启linux远程桌面连接
一.说明: 本文的目的是实现在windows机器上利用远程桌面连接来访问远程的linux桌面. 这里使用的是阿里云服务器,操作系统为Centos6.5. 二.基本步骤: 1.首先保证服务器已经安装完毕 ...
- WorkFlowHelper
/* # Microshaoft /r:System.Xaml.dll /r:System.Activities.dll /r:System.Activities.DurableInstancing. ...