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 header()函数使用说明
Jul 10 PHP
php 破解防盗链图片函数
Dec 09 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
Sep 30 PHP
PHP教程 预定义变量
Oct 23 PHP
php中关于普通表单多文件上传的处理方法
Mar 25 PHP
ThinkPHP内置jsonRPC的缺陷分析
Dec 18 PHP
php判断当前用户已在别处登录的方法
Jan 06 PHP
php中file_exists函数使用详解
May 08 PHP
PHP+JQUERY操作JSON实例
Mar 23 PHP
php-msf源码详解
Dec 25 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
Apr 09 PHP
PHP 观察者模式深入理解与应用分析
Sep 25 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
牡丹941资料
2021/03/01 无线电
php递归列出所有文件和目录的代码
2008/09/10 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php的常量和变量实例详解
2017/06/27 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
JavaScript编码小技巧分享
2020/09/17 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
python单链表实现代码实例
2013/11/21 Python
推荐11个实用Python库
2015/01/23 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python 装饰器深入理解
2017/03/16 Python
Python配置文件处理的方法教程
2019/08/29 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
python批量修改交换机密码的示例
2020/09/22 Python
接口的多继承会带来哪些问题
2015/08/17 面试题
民族团结演讲稿范文
2014/08/27 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
2015年酒店工作总结
2015/04/28 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
毕业证明模板
2015/06/19 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python