当前位置:  编程技术>jquery

Multiselect 多选列表框操作的jquery代码

    来源: 互联网  发布时间:2014-10-04

    本文导语:  说明: 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"。

例如:
 

代码示例:
PHP

3、应用multiselect插件。
 

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

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

附完整示例代码下载


    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery UI MultiSelect Widget
  • jQuery 多选输入插件 Bootstrap Multiselect
  • 对象列表 multiselect
  • jQuery MultiSelect Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3