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

 更新时间:2015年10月22日 15:11:34   投稿:lijiao  
这篇文章主要介绍了PHP+Mysql+jQuery查询和列表框选择操作实现过程,需要的朋友可以参考下

本文讲解如何通过ajax查询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设计模式之命令模式示例详解

    这篇文章主要给大家介绍了关于PHP设计模式之命令模式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • php empty()与isset()区别的详细介绍

    php empty()与isset()区别的详细介绍

    本篇文章是对php中empty()与isset()的区别进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • 详解Laravel框架的依赖注入功能

    详解Laravel框架的依赖注入功能

    依赖注入不是让对象创建一个依赖关系,也不是让工厂对象去创建对象,而是将所需的依赖变成一个外部对象,使之成为一个"某些人的问题”,你为"某些人的问题”注入了类的依赖关系。在Laravel中,这个"某人”是服务容器,服务容器负责通过构造函数注入类的依赖关系。
    2021-05-05
  • php中Workerman框架实例讲解

    php中Workerman框架实例讲解

    在本篇文章里小编给大家分享了一篇关于php中Workerman框架实例讲解内容,对此有兴趣的朋友们可以学习参考下。
    2021-02-02
  • PHP 遍历文件实现代码

    PHP 遍历文件实现代码

    小笔记, PHP 遍历所有文件, 包括子目录中的文件. 和压缩文件的类结合起来的话, 就可以打包整个目录了.
    2011-05-05
  • PHP中localeconv()函数的用法

    PHP中localeconv()函数的用法

    今天小编就为大家分享一篇关于PHP中localeconv()函数的用法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • PHP实现的各种进制相互转换功能小工具示例

    PHP实现的各种进制相互转换功能小工具示例

    这篇文章主要介绍了PHP实现的各种进制相互转换功能小工具,涉及php常见的二进制、八进制、十六进制等相互转换操作实现技巧,需要的朋友可以参考下
    2018-03-03
  • 探讨如何在PHP开启gzip页面压缩实例

    探讨如何在PHP开启gzip页面压缩实例

    本篇文章是对PHP开启gzip页面压缩实例进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • PHP实现XML与数据格式进行转换类实例

    PHP实现XML与数据格式进行转换类实例

    这篇文章主要介绍了PHP实现XML与数据格式进行转换类,实例分析了php进行XML格式数据的方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • Thinkphp结合ajaxFileUpload实现异步图片传输示例

    Thinkphp结合ajaxFileUpload实现异步图片传输示例

    这篇文章主要给大家介绍了利用Thinkphp结合ajaxFileUpload实现异步图片传输的方法,文中给出了详细的示例代码,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03

最新评论