万博体育ManBetX手机版

欢迎访问

云南万博信息技术有限公司官方网站,云南网站建设诚信品牌!

万博网络,云南万博信息技术有限公司

万博客服热线

DING HAO COLUMN 万博专栏

万博的一些分享
Sharing from Ding Hao

  • 万博服务
  • 1

Multiselect:操作多选列表框

来源:     2013年07月02日17:02
字号:T|T

Multiselect是一个采用jQuery实现的两边多选列表控件。可以将需要选定的项目从左边添加到右边的列表框中。或者将不需要的项目从右边列表框中删除。

查看演示DEMO 下载源码

Multiselect有以下功能特性:

可以将列表框左右两边的项进行移动(互换)。

可以通过双击事件移动列表框中的项。

可以设置已选项目的最大数。

可以自定义外观样式。

怎样使用?

1、准备jquery和jquery.multiselect2side插件以及CSS样式。


插件和样式文件在DEMO中已经包含,您可以下载整个DEMO就可以使用。

2、XHTML。

PHPMYSQLASP.NETXHTMLCSSJQUERY

我假设列表框中已存在一些静态项,这些数据可以通过动态加载进来。如果默认已经有选择的项,则看将option的属性selected设置为"selected"。如:

PHP

3、应用multiselect插件。

$(function(){
   $("#liOption").multiselect2side({
	    selectedPosition: 'right',
	    moveOptions: false,
		labelsx: '待选区',
		labeldx: '已选区'
   });
});

multiselect提供了一些属性的设置,selectedPosition:选择项的位置,默认为right,即最终获取选择的值是右边的列表框。moveOptions:移动选项,可以用来给选项排序,实际应用意义不大,这里设置为false。labelsx和labeldx是用来设置左右两个列表框的标题,如果不需要可设置为空。maxSelected:最大选项数,即最多只能选择几项。

在后面的文章中我会用一个专门的实例来讲解多选列表框的查询、加载、获取数据的方法,敬请关注。

客服中心
点击进行在线咨询

QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

咨询热线:0871-63399840

客服热线:0871-63523332

客服中心 客服中心