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开发大型项目的一点经验
Oct 09 PHP
第十节 抽象方法和抽象类 [10]
Oct 09 PHP
PHP生成静态页面详解
Dec 05 PHP
php 编写安全的代码时容易犯的错误小结
May 20 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
Jan 27 PHP
PHP获取MAC地址的具体实例
Dec 13 PHP
php实现的简单日志写入函数
Mar 31 PHP
php生成图片验证码的方法
Apr 15 PHP
Smarty模板简单配置与使用方法示例
May 23 PHP
PHP实现接收二进制流转换成图片的方法
Jan 10 PHP
关于php支持的协议与封装协议总结(推荐)
Nov 17 PHP
PHP yield关键字功能与用法分析
Jan 03 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
Syphon 使用方法
2021/03/03 冲泡冲煮
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php 上传功能实例代码
2010/04/13 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
鼠标图片振动代码
2006/07/06 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
Python sys.path详细介绍
2013/10/17 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python脚本内运行linux命令的方法
2015/07/02 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python可迭代对象操作示例
2019/05/07 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
销售高级职员求职信
2013/10/29 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
文艺演出策划方案
2014/06/07 职场文书
小学生校园广播稿
2014/09/28 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js