html 下拉多选框代码,js实现下拉复选框效果（代码实例）

本章给大家带来用js实现下拉复选框效果(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

先看看效果：

下面我们看看代码：

HTML代码：

HTML
CSS
JavaScript
jQuery
PHP
MySQL

Java
C#
C++
Pyhton

css代码：div {

display: inline-block;

}

select {

min-width: 200px;

height: 25px;

border: 1px solid #000;

}

ul {

display: none;

list-style: none;

margin: 0;

padding: 0;

border: 1px solid #000;

}

label {

display: block;

padding: 2px 10px;

white-space: nowrap;

}

ul li:hover {

background-color: #aabbcc;

}

JavaScript代码：/**

* [dropDownCk 下拉复选框]

* @param {[String]} boxId [父级元素id]

* @param {[String]} selectId [下拉选id]

* @param {[String]} hiddenId [隐藏区域id]

* @return {[Array]} [description]

function dropDownCk(selectId,hiddenId) {

var boxId = "#" + boxId,

selectId = "#" + selectId,

hiddenId = "#" + hiddenId;

$(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域

$(this).hide();

});

$(selectId).click(function() { // 切换显示与隐藏

$(hiddenId).toggle();

});

var tagArr = []; // 接收复选字段数组

$(selectId).html("" + "请选择项目" + "");

$(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素

if ($(this).is(':checked')) {

tagArr.push($(this).parent().text());

$(selectId).html("" + tagArr.join(",") + "");

} else {

tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素

if (tagArr.length == 0) {

$(selectId).html("" + "请选择项目" + "");

} else {

$(selectId).html("" + tagArr.join(",") + "");

}

});

return tagArr;

}

var tag1 = dropDownCk("lang1","ck1");

var tag2 = dropDownCk("lang2","ck2")

注意：当遇到选项比较多时，可以定义一个数组插入到HTML中，实现下拉的选项，可以参考三级联动的写法：玩转javascript之三级联动实例。

html 下拉多选框代码,js实现下拉复选框效果（代码实例）相关推荐

html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
JavaFX --- 标签、文本框、密码框、下拉框、按钮、单选按钮、复选框
目录 JavaFX的基本结构和概念 Application --- 代表了JavaFX的应用程序 Stage --- 舞台 --- 代表了一个窗体. 在Application的start方法中,提供了 ...
html自动切换文字,JS实现自动切换文字的导航效果代码
本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制 ...
html5复选框控制按钮状态,HTML input checkbox复选按钮简介说明
摘要: 下文讲述html代码中input type='checkbox'时的相关属性简介说明,如下所示: input type='checkbox' 简介当input标签中type='checkbo ...
html 勾选框整体勾选,html勾选框_html5实现表单的复选框验证
摘要腾兴网为您分享:html5实现表单的复选框验证,中日翻译,携程,悟空识字,天气预报等软件知识,以及寻仙答题器,山东省民生警务平台,买车168,关键词优化精灵,文件拷贝工具,自动壁纸,语音播报软件 ...
复选框遍历选中 php,jQuery的复选框选择并且获取值
这次给大家带来jQuery的复选框选择并且获取值,jQuery复选框选择并且获取值的注意事项有哪些,下面就是实战案例,一起来看一下. 一.checkbox选择在jQuery中,选中checkbox通 ...
在reader中勾选pdf复选框_绝对可勾选的在WORD 2003中加入复选框的方法
绝对可勾选的在 word 2003 中加入复选框的方法方法一: 要在 word 2003 中加入复选框,最好是使用"控件工具箱"来完成. 具体方法是: 打开 Word ,依次点击 ...
dw 复选框 php输出,Dreamweaver CS3的复选框使用方法
dreamweaver cs4 (dw cs4)中文正式版软件大小:143.3M授权方式:免费软件立即下载 Dreamweaver CS3复选框怎么用?Dreamweaver CS3复选框也是制作 ...
bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

html 下拉多选框代码,js实现下拉复选框效果（代码实例）

html 下拉多选框代码,js实现下拉复选框效果（代码实例）相关推荐

最新文章

热门文章