教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 Multiselect 多选列表框操作的jquery代码

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

发布时间:2015-12-05   编辑:jiaochengji.com
本文介绍下,jquery控件Multiselect操作多选列表框的例子,有需要的朋友参考下。

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

效果图,如下:
jquery控件Multiselect 多选列表框

Multiselect有以下功能特性:
可以将列表框左右两边的项进行移动(互换)。
可以通过双击事件移动列表框中的项。
可以设置已选项目的最大数。
可以自定义外观样式。
怎样使用?
1、准备jquery和jquery.multiselect2side插件以及CSS样式。
 

复制代码 代码示例:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.multiselect2side.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" />
 

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

2、XHTML。
 

复制代码 代码示例:
<select name="liOption[]" id='liOption' multiple='multiple' size='8' >
    <option value="PHP">PHP</option>
    <option value="MYSQL">MYSQL</option>
    <option value="ASP.NET">ASP.NET</option>
    <option value="XHTML">XHTML</option>
    <option value="CSS">CSS</option>
    <option value="JQUERY">JQUERY</option>
</select>
 

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

例如:
 

复制代码 代码示例:
<option value="PHP" selected="selected">PHP</option>

3、应用multiselect插件。
 

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

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

附完整示例代码下载

您可能感兴趣的文章:
Multiselect 多选列表框操作的jquery代码
jQuery MultiSelect Plugin
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
jquery multiSelect 多选下拉框
利用jquery操作select下拉列表框的代码
jquery multiselect
jquery 操作单选框,复选框,下拉列表实现代码
JQuery 常用操作代码
jquery 表单取值常用代码
jQuery 操作下拉列表框实现代码

关键词: Multiselect  多选列表框   
[关闭]
~ ~