本文讲解如何通过ajax查询MysqL数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加入到已选区,可以用在许多后台管理系统中。本文列表框的操作依赖jquery插件。
HTML
rush:xhtml;">
说明,HTML内容是一个表单,里面放置有一个查询输入框,和一个列表框,以及相关按钮。
MysqL数据表结构
rush:sql;">
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
rush:xhtml;">
本例中只加载了Multiselect插件所需的样式文件,其他CSS大家可以自行设计。
JAVASCRIPT
首先需要引用本例所需的两个js文件。rush:js;">
rush:PHP;">
$("#liOption").multiselect2side({
selectedPosition: 'right',moveOptions: false,labelsx: '待选区',labeldx: '已选区'
});
rush:java;">
$("#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
rush:PHP;">
$conn=MysqL_connect("localhost","root","");
MysqL_select_db("demo",$conn);
MysqL_query("SET names UTF8");
第二步读取数据,并输出。通过检测搜索框传来的值,构造不同的sql语句,并将数据返回输出,代码如下:
0){
while($row=MysqL_fetch_array($query)){
$str.="";
}
echo $str;
}else{
echo "1";
}
最后还有一个提交操作,后台post.PHP程序来获取最终提交的项的值。
rush:PHP;">
$selID=$_POST['liOptionms2side__dx'];
if(!empty($selID)){
$str=implode(",",$selID);
echo $str;
}else{
echo "没有选择任何项目!";
}
注意,我们获取的是右边列表框liOptionms2side__dx的值,而不是liOption的值。 一个查询、操作的例子实现了,但是还有一点点瑕疵,在待选区往已选区添加项目时,如何判断控制已经添加过的项目不能重复添加,这个就留给大家思考吧,试一试有什么好的解决方式。
原文地址:https://www.jb51.cc/php/21071.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。