Multiselect 多选列表框操作的jquery代码
本文导语: 说明: Multiselect是一个采用jQuery实现的两边多选列表控件。 可以将需要选定的项目从左边添加到右边的列表框中。 或者将不需要的项目从右边列表框中删除。 效果图,如下: Multiselect有以下功能特性: 可以将列表框左右...
说明:
Multiselect是一个采用jQuery实现的两边多选列表控件。
可以将需要选定的项目从左边添加到右边的列表框中。
或者将不需要的项目从右边列表框中删除。
效果图,如下:
Multiselect有以下功能特性:
可以将列表框左右两边的项进行移动(互换)。
可以通过双击事件移动列表框中的项。
可以设置已选项目的最大数。
可以自定义外观样式。
怎样使用?
1、准备jquery和jquery.multiselect2side插件以及CSS样式。
插件和样式文件在DEMO中已经包含,您可以下载整个DEMO就可以使用。
2、XHTML。
PHP
MYSQL
ASP.NET
XHTML
CSS
JQUERY
假设列表框中已存在一些静态项,这些数据可以通过动态加载进来。
如果默认已经有选择的项,则看将option的属性selected设置为"selected"。
例如:
3、应用multiselect插件。
$("#liOption").multiselect2side({
selectedPosition: 'right',
moveOptions: false,
labelsx: '待选区',
labeldx: '已选区'
});
});
multiselect提供了一些属性的设置,selectedPosition:选择项的位置,默认为right,即最终获取选择的值是右边的列表框。moveOptions:移动选项,可以用来给选项排序,实际应用意义不大,这里设置为false。labelsx和labeldx是用来设置左右两个列表框的标题,如果不需要可设置为空。maxSelected:最大选项数,即最多只能选择几项。
附完整示例代码下载
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。