jquery Multiselect插件实现操作多选列表框

时间：2013-05-13 编辑：简简单单来源：一聚教程网

Multiselect有以下功能特性：

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

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

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

可以自定义外观样式。

怎样使用？

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

代码如下	复制代码
javascript" src="js/jquery.js">

插件和样式文件在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：最大选项数，即最多只能选择几项

完全实例

代码如下

复制代码

words" content="多选列表框,jquery插件" />
操作多选列表框

Multiselect：操作多选列表框

根据上面的实例我们来看一个PHP+Mysql+jQuery实现查询和列表框选择操作

XHTML

代码如下

复制代码

说明，HTML内容是一个表单，里面放置有一个查询输入框，和一个列表框，以及相关按钮。

MYSQL数据表结构

代码如下	复制代码
CREATE TABLE IF NOT EXISTS `t_mult` ( `id` int(11) NOT NULL auto_increment, `username` varchar(32) NOT NULL, `phone` varchar(20) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

表t_mult是一张联系人资料表，包括姓名和手机号码字段。

CSS

代码如下	复制代码

本例中只加载了Multiselect插件所需的样式文件，其他CSS大家可以自行设计。

JAVASCRIPT

首先需要引用本例所需的两个js文件。

代码如下	复制代码

接着我们来调用Multiselect插件。

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

关于Multiselect的应用，如果不熟悉的可以查看之前的文章：Multiselect：操作多选列表框

然后我们来写搜索按钮进行Ajax查询数据的操作。

代码如下

复制代码

$("#searchOption").click(function(){
    var keys=$("#keys").val();
    $.ajax({
         type: "POST",
         url: "action.php",
         data: "title="+keys,
         success: function(msg){
            if(msg==1){
                $("#msg_ser").show().html("没有记录！");
            }else{
                $("#liOptionms2side__sx").html(msg);
                $("#msg_ser").html("");
            }
         }
    });
    $("#msg_ser").ajaxSend(function(event, request, settings){
        $(this).html("");
    });
});

说明，当点击搜索按钮时，进行的是Ajax异步操作，JAVASCRIPT将获取的搜索框的输入值，以POST方式传递给后台程序action.php处理，处理后，返回不同的结果给JAVASCRIPT，如果返回1，HTML页面会提示“没有记录”，反之，则将结果输出给左边列表框（待选区）：liOptionms2side__sx。注意关键的地方到了，为什么列表框不是XHTML离的liOption，而变成了liOptionms2side__sx了呢？这个要从Multiselect插件说起，Multiselect插件其实就是将一个列表框装换成左右两个列表框，已供相关操作，通过查看其插件代码不难发现，左边的列表框名为：liOptionms2side__sx，右边列表框（已选区）名为：liOptionms2side__dx，后面会用到。

PHP

首先来看action.php的处理。

第一步是连接数据库。

代码如下	复制代码
$conn=mysql_connect("localhost","root",""); mysql_select_db("demo",$conn); mysql_query("SET names UTF8");

第二步读取数据，并输出。通过检测搜索框传来的值，构造不同的SQL语句，并将数据返回输出，代码如下：

代码如下

复制代码

$keys=trim($_POST['title']);
$keys=mysql_real_escape_string($keys,$conn);
if(!empty($keys)){
        $sql="select * from t_mult where username like '%$keys%' or phone='$keys'";
}else{
        $sql="select * from t_mult";
}
$query=mysql_query($sql);
$count=mysql_num_rows($query);
if($count>0){
      while($row=mysql_fetch_array($query)){
          $str.="".$row['username']."-".$row['phone']."";
    }
    echo $str;
}else{
      echo "1";
}

最后还有一个提交操作，后台post.php程序来获取最终提交的项的值。

代码如下	复制代码
$selID=$_POST['liOptionms2side__dx']; if(!empty($selID)){ $str=implode(",",$selID); echo $str; }else{ echo "没有选择任何项目！"; }

注意，我们获取的是右边列表框liOptionms2side__dx的值，而不是liOption的值。

上一个： jquery Validation插件表单验证实例
下一个： Ajax无刷新验证用户名、密码和邮箱等输入信息

推荐专题

最新下载

热门教程

jquery Multiselect插件实现操作多选列表框

Multiselect：操作多选列表框

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程