原生js实现的下拉多选控件，引用只需一个js

原生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 可免积分获取）：去下载页面★…