<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CheckboxSelect demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./CheckboxSelect/CheckboxSelect.js" charset="UTF-8"></script><!--为防止出现乱码，引用的时候最好加上charset="UTF-8"-->
<script type="text/javascript">
/*****************************************************控*件*方*法*参*数*详*解***************************************************************
一、主要调用的方法：
（一）方法描述:
CheckboxSelect方法：通过select标签创建下拉多选组件的方法
CheckboxSelectJson方法：通过json数据创建下拉多选组件的方法
（二）方法语法：
1、CheckboxSelect语法：
CheckboxSelect(seleid,jsonPar);
① seleid 参数：必填，select标签的id
② jsonPar 参数：可选填，参数类型为一个json，用于定制个性化多选控件，这个json所有有效属性见下面附注1
2、CheckboxSelectJson语法：
CheckboxSelectJson(tabId,seleName,jsondata,width,height,jsonPar);
① tabId 参数：必填，一个标签的id（参数作用：在这个标签下创建下拉多选组件）
② seleName 参数：必填，下拉多选组件name（参数作用：用于提交form表单时获取值）
③ jsondata 参数：必填，json格式，下拉选项数据（参数作用：创建供选择的选项）
④ width 参数：必填，控件宽度（参数作用：设置下拉多选组件的长度）
⑤ height 参数：必填，控件高度（参数作用：设置下拉多选组件的高度）
⑥ jsonPar 参数：可选填，参数类型为一个json，用于定制个性化多选控件，这个json所有有效属性见下面附注1
二、辅助方法：
（一）实例方法：
var box = new CheckboxSelect("seleid");
box.onChange(function(newV,oldV){//值改变事件
alert("内容改变！\n\t新值："+newV+"\n\t旧值："+oldV);
});
box.disabledTrue();//禁用多选框
box.disabledFalse();//启用多选框
box.resetSelecteds();//清空选项值
box.setValues("000001,000002,000005",",");//赋值
box.setDefaultWord("请选择");//设置未选择值时的缺省字体
box.setRadio(true);//设置控件是否只能单选（true：单选，false：多选）
box.setMaxOptNum(2);//设置最多能选择的选项数（设置为0则不限制）
（二）非实例方法：
getCheckboxOptionValues("seleid");//获取value值
getCheckboxOptionTexts("seleid");//获取text值
resetCheckboxOptionSelecteds("seleid");//清空选项值
setCheckboxOptionSelecteds("seleid","000001,000002,000005",",");//赋值
setCheckboxOptionRadio("seleid",true);//设置控件是否只能单选（true：单选，false：多选）
setCheckboxOptionMaxOptNum("seleid",1);//设置最多能选择的选项数（设置为0则不限制）
CheckboxSelectDisabledFalse("seleid");//启用多选框
CheckboxSelectDisabledTrue("seleid");//禁用多选框
setCheckboxOptionDefaultWord("seleid","请选择");//设置未选择值时的缺省字体
setCheckboxOptionCheckAll("seleid");//设置全选
CheckboxSelectOnChange("seleid",function(newV,oldV){//值改变事件
alert("内容改变！\n\t新值："+newV+"\n\t旧值："+oldV);
});
var jsondata = {'01':'aaaaa','02':'bbbbb','03':'ccccc','04':'ddddd','05':'eeeee','06':'fffff'};
setCheckboxOptions("seleid",jsondata);//设置下拉选项内容
* 附注：
【附注1】jsonPar参数所有有效的属性：
var jsonPar={
valueSplitChar: ";",//多选框选择的value值（保存到后台的值）用什么符号隔开，这里默认为英文分号隔开
textSplitChar: "; ",//多选框选择的text值（页面展现的值）用什么符号隔开，这里默认为英文分号加一个空格隔开
borderColorOver: "#26A0DA",//鼠标经过或获取焦点时的边框颜色
icoBackgColorOver: "#EAF6FD",//鼠标经过或获取焦点时的图标背景颜色
borderColorOut: "#95B8E7",//鼠标离开或没获取焦点时的边框颜色
icoBackgColorOut: "#FFFFFF",//鼠标离开或没获取焦点时的图标背景颜色
icoToChar: false, //设置下拉图标为字符还是为图片(true-用字符的下拉图标，false-用图片的下拉图标)
icoURL: "/images/combo_arrow.png",//设置下拉图标为图片时的图片路径
optionBorderColor: "#95B8E7", //选项面板边框颜色
selectAllButton: true, //设置是否有全选按钮(true-有，false-没有)
valueShowOrder : 0,//设置选择的值按哪种方式展现（0-按下拉选项顺序展现选中的值，1-按用户选择的顺序展现选中的值）
maxSelectCount : 0, //设置最多能选择的选项数（设置为0则不限制）
maxSelectedOperMode: 0,//配合maxSelectCount参数来设置，当maxSelectCount设置0以上的数时这个设置才有效，可设置的值（0-达到最大选择数后可继续选中，但会把前一个选中的取消，改为当前选中的，1-达到最大选择数后不可以再选择了）
oneLineOptionNumber: 1 //设置选项面板中，一行显示多少个选项
onChange : function(a,b){//值改变事件
},
defaultWord : "", //设置未选择值时的缺省字体
disabled : false //设置是否禁用多选框(false-启用，true-禁用)
}
*****************************************************控*件*方*法*参*数*详*解***************************************************************/
window.onload = function(){
/*******************************************通过select标签创建下拉多选组件******************************************************/
/**-----1、实例的方式调用-----**/
var box = new CheckboxSelect("seleid");
box.onChange(function(newV,oldV){//值改变事件
document.getElementById("select_valueMonitoring_new").value=newV;
document.getElementById("select_valueMonitoring_old").value=oldV;
});
box.setValues("000001,000002,000003",",");//赋值
box.setDefaultWord("请选择");//设置未选择值时的缺省字体
box.setMaxOptNum(0);//设置最多能选择的选项数（设置为0则不限制）
/**-----2、脱离实例的方式调用-----
CheckboxSelect("seleid");//创建控件
CheckboxSelectOnChange("seleid",function(newV,oldV){//值改变事件
document.getElementById("select_valueMonitoring_new").value=newV;
document.getElementById("select_valueMonitoring_old").value=oldV;
});
setCheckboxOptionSelecteds("seleid","000001,000002,000005",",");//赋值
setCheckboxOptionDefaultWord("seleid","请选择值");//设置未选择值时的缺省字体
**/
/**-----3、带json配置的方式调用-----
var box = new CheckboxSelect("seleid",{
onChange : function(newV,oldV){//值改变事件
document.getElementById("select_valueMonitoring_new").value=newV;
document.getElementById("select_valueMonitoring_old").value=oldV;
},
defaultWord : "请选择选项"//设置未选择值时的缺省字体
});
box.setValues("000001,000002,000006",",");//赋值
**/
/*************************************通过select标签创建一个有特点的下拉多选组件***********************************************/
var boxCus = new CheckboxSelect("seleidCustomized",{
onChange : function(newV,oldV){//�
- 1
- 2
前往页