JQuery下拉框插件(selectbox)，支持多选和单选

原文地址：http://www.pangyuyu.com/?p=216

在做页面的时候常会遇到有关于下拉列表样式的问题.也许会有人问,为什么我的遮罩层,无法盖住下拉列表框? select元素在ie中是一个特例，它是一个窗体级别的元素，所以它的优先级高于其他所有的html标签，所以会遮住别人，只有同为窗体级的frame才能遮住它！ 自己在工作过程中,也遇到过此类问题,连带着一些样式能不能随意更改这类需求.就抽了时间,写一个JQuery自定义下拉框插件(selectbox).

本控件保存了它自身原有的基本功能.在这个基础上面扩展了多选功能与自定义样式.

多选功能: 在多选的时候可以设置必选项和最多选择项.

(1)必选项:如下图所示:将”我是1””我是3”这两项设置为必选项,那么不论用户愿意是否,这两项内容都将在信息列表里面.





(2)最多选择项:可以给用户一个基数让他们在某个特定的范围内进行选择.(列如:在让用户自定义创建表格的时候,就可以用到这个扩展功能)

自定义样式:在很多时候,我们需要一些不一样子的下拉列表框.该控件支持样式自定义.在这个过程中,还可以进行说明文字的显示.

该控件,我已经在IE / FireFox / Chrome 这三个浏览器下测试过,都没有什么问题.下面将案例演示地址跟源码下载地址贴出来:

案例演示
here

源码下载



[b]dropdown.zip
(32.6 KiB, 1,313 hits)[/b]

———————————————————华丽丽的分隔线之后—————————————————

参数说明

$(‘#s11′).dropdownlist({

id:”,//假设id为dr1,则可以用方法dr1.disable(),dr1.enable(),dr1.init(data,selected)/可用作联动/,dr1.text,dr1.value;$(‘#dr1′).val();dr1.onchange=callback

width:100,//显示宽

listboxwidth:0,//下拉框宽为0表示同上面的显示宽度

listboxmaxheight:200,//下拉框最大高度，超过即显示滚动条

listboxalign:’auto’,//下拉列表的对齐方式，可选值left,right,auto

columns:1, //显示列数

checkbox:false,//是否复选

maxchecked:3,//最多同时选择数，checkbox=true时有效

selectedtext:”,//checkbox=true时有效,选择框文字,为空显示为选中项，非空时固定不变

requiredvalue:[],//必须选择的值,显示为不可点击状态，checkbox=true时有效，

disabled:false,//是否禁用

selectclass:’ddl-select’,//选框样式

listboxclass:’ddl-listbox’,//展开的列表框样式

selected:[],//选中的对象value，

data:{},//数据，格式：{value:name}

onchange:function(text,value){ //回调函数

}

});

我自己在用的时候、出了点小差错、以下是需要注意的地方：

附件中的“jq.js“、最好用jquery-1.4.1.min.js这个版本的、如果点击那个控件没有出来下拉框、那估计就是这个JQ的问题。

别的就木有了、作者写的很详细、一看就明白的···(⊙o⊙)…