php与mysql列表_PHP+Mysql+jQuery实现的查询和列表框选择

本篇文章主要介绍PHP+Mysql+jQuery实现的查询和列表框选择，感兴趣的朋友参考下，希望对大家有所帮助。

本文讲解如何通过ajax查询mysql数据，并将返回的数据显示在待选列表中，再通过选择最终将选项加入到已选区，可以用在许多后台管理系统中。本文列表框的操作依赖jquery插件。

HTML

说明，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: '已选区'

});

然后我们来写搜索按钮进行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";

}