原生js实现的下拉多选控件,引用只需一个js
2017-01-08 21:17
453 查看
原生js实现的下拉多选控件
一、 各函数的使用方法和其作用简介
1. 调用本控件的函数
CheckboxSelect("selectid");a) 详解:这个函数带一个参数,参数为select标签的id;
b) 注意:这个函数调用的时候一定要放在以下任意的一个方法中:
① jQuery方法:$(document).ready(function(){
});
② js方法:window.onload =function(){ }
图v.1 控件页面展现样貌:
图v.2 控件禁用时的状态:
图v.3 控件源码截图:
2. 取值函数
a) 以<optionvalue="130305591928">text</option>为例:① 取value值:getCheckboxOptionValues(“selectid”)(参数”selectid”为select的id,这里取得"130305591928"这个值)
② 取text值:getCheckboxOptionTexts(“selectid”)(参数”selectid”为select的id,这里取得“text”这个值)
图v.4 取值示例:
3. 重置函数(恢复初始未选择的状态)
resetCheckboxOptionSelecteds(“selectid”)a) 详解:这个函数带一个参数,参数为select标签的id;
4. 赋值函数
setCheckboxOptionSelecteds(“selectid”,”selectOptionValues”,”,”);a) 详解:这个函数带两个参数
1) 参数1(“selectid”):select标签的id;
2) 参数2(“selectOptionValueStr”):一串用特定符号隔开的value值
3) 参数3(”,”):隔开select标签中value值的那个特定符号
5. 值改变事件监听方法
CheckboxSelectOnChange("seleid",function(newV,oldV){alert("内容改变!\n\t新值:"+newV+"\n\t旧值:"+oldV);
});
a) 参数详解:
1) “selectid”:select标签的id;
2) newV参数:改变后的新值;
3) oldV参数:改变前的值;
6. 自定义控件参数
可以在CheckboxSelect.js文件中自定义适合自己项目的参数,如图:7. 附加说明
文件包里的demo.html列出了本文所讲方法函数的使用示例,可运行demo.html看看效果更有助于理解应用,如果在应用中发现控件缺陷可加QQ群376687100,或发送邮件至zgwyfz@163.com反馈意见或提出建议,一起探讨完善这个控件.(注:最新的版本都发布在376687100这个QQ群,如果想获取最完善的那个,请加这个QQ群)下载链接(加QQ群376687100可免积分获取):http://download.csdn.net/download/zgwyfz/10175404
相关文章推荐
- 【Gulp】gulp和JsonSever结合模拟数据
- 序列化和Json
- 【JavaScript的基础知识总结】
- js 全选、反选、批删
- JSP请求的转发与重定向——day10
- express4+passport实现用户注册登录验证
- 再续js打印图形
- js模板引擎实现原理
- 我们应该如何去了解JavaScript引擎的工作原理
- JSBinding+Bridge:逻辑代码中操作二进制数据
- 【JS】BOM
- JSF中Facescontext对象详解
- JSHint配置项说明
- 通过URL获取JSON解析详解
- js中一些对字符串的操作等
- ArrayList转换为JSON字符串
- json-lib之jsonConfig详细使用
- JavaScript面向对象精要(二)
- JS 手机浏览器唤醒手机QQ
- 实现js的类似alert效果的函数