PHP+Mysql+jQuery查询和列表框选择操作实例讲解


Posted in PHP onOctober 22, 2015

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

PHP+Mysql+jQuery查询和列表框选择操作实例讲解

HTML

<form id="sel_form" action="post.php" method="post"> 
  <p><input type="text" name="keys" id="keys" value="输入姓名或手机号码" onclick="this.value=''" /> 
  <input type="button" id="searchOption" value="搜索" /> <span id="msg_ser"></span></p> 
  <div id="sel"> 
  <select name="liOption[]" id='liOption' multiple='multiple' size='8'> 
  </select> 
  </div> 
  <input type="submit" value="提 交" /> 
</form>

说明,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

<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" />

本例中只加载了Multiselect插件所需的样式文件,其他CSS大家可以自行设计。
JAVASCRIPT
首先需要引用本例所需的两个js文件。

<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" />

接着我们来调用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"; 
} 
$query=mysql_query($sql); 
$count=mysql_num_rows($query); 
if($count>0){ 
  while($row=mysql_fetch_array($query)){ 
    $str.="<option value='".$row['id']."'>".$row['username']."-".$row['phone']."</option>"; 
  } 
  echo $str; 
}else{ 
  echo "1"; 
}

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

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

注意,我们获取的是右边列表框liOptionms2side__dx的值,而不是liOption的值。
一个查询、操作的例子实现了,但是还有一点点瑕疵,在待选区往已选区添加项目时,如何判断控制已经添加过的项目不能重复添加,这个就留给大家思考吧,试一试有什么好的解决方式。

PHP 相关文章推荐
PHP生成UTF8文件的方法
May 15 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
Mar 13 PHP
YII中assets的使用示例
Jul 31 PHP
php实现格式化多行文本为Js可用格式
Apr 15 PHP
PHP学习笔记(二):变量详解
Apr 17 PHP
PHP变量赋值、代入给JavaScript中的变量
Jun 29 PHP
PHP实现简单汉字验证码
Jul 28 PHP
PHP定时执行任务的3种方法详解
Dec 21 PHP
PHP连接MYSQL数据库实例代码
Jan 20 PHP
yii的入口文件index.php中为什么会有这两句
Aug 04 PHP
PHP面向对象类型约束用法分析
Jun 12 PHP
ThinkPHP5与单元测试PHPUnit使用详解
Feb 23 PHP
PHP实现无限级分类(不使用递归)
Oct 22 #PHP
PHP实现递归无限级分类
Oct 22 #PHP
php防止网站被攻击的应急代码
Oct 21 #PHP
PHP统计当前在线用户数实例讲解
Oct 21 #PHP
php精确的统计在线人数的方法
Oct 21 #PHP
为你总结一些php信息函数
Oct 21 #PHP
深入理解PHP变量的值类型和引用类型
Oct 21 #PHP
You might like
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PHP 简单日历实现代码
2009/10/28 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
python中异常报错处理方法汇总
2016/11/20 Python
pandas 将索引值相加的方法
2018/11/15 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
python全栈开发语法总结
2020/11/22 Python
python os.rename实例用法详解
2020/12/06 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
中年人生感言
2014/02/04 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
助学感谢信范文
2015/01/21 职场文书
小学德育工作总结2015
2015/05/12 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript