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的值。
一个查询、操作的例子实现了，但是还有一点点瑕疵，在待选区往已选区添加项目时，如何判断控制已经添加过的项目不能重复添加，这个就留给大家思考吧，试一试有什么好的解决方式。

赞 (0)

相关推荐

  • JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#se

  • php使用数组填充下拉列表框的方法

    本文实例讲述了php使用数组填充下拉列表框的方法.分享给大家供大家参考.具体实现方法如下: <?php $data = array( (object)array("titulo"=>"Ford", "valor"=>"opcion1"), (object)array("titulo"=>"Peugeot", "valor"=>"

  • jQuery easyui datagrid动态查询数据实例讲解

    jQuery easyui datagrid动态查询数据实例讲解

    该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码 复制代码 代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu

  • 基于jquery的可多选的下拉列表框

    同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个. 先看效果: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html JS: 复制代码 代码如下: (function ($) { $.fn.extend({ MultDropList: function (options) { var op = $.extend({ wraperClass: "

  • php 数组操作(增加，删除，查询，排序)等函数说明第1/2页

    数据增加,删除,查询,排序详细说明 对数组的添加(首尾数据添加(不限定条数)以及中间任意位置添加数据操作) . 2-对数组的删除(首尾的数据删除(不限定条数)以及中间任意位置的数据删除操作,条件:对数组中间位置删除的,后面的值往前挪,接上以前的位置) . 3-对数据的排序操作(排序操作,要的是效率) . 4-对数组的查询(对数组中的某一数据进行查询,如果满足,则生成新的数组,这个新的数组就是满足查询条件的,条件:查询,并不是查询某一个值,还有查询某一个值满足某个条件,举个例子:查询数组中某个值大

  • PHP查询数据库中满足条件的记录条数(两种实现方法)

    在需要输出网站用户注册数,或者插入数据之前判断是否有重复记录的时候,就需要获取满足条件的MySQL查询的记录数目. 第一种方法:查询时候直接统计 复制代码 代码如下: $sql="SELECT COUNT(*) AS count FROM TABLE WHERE id='$id'"; $result=mysql_fetch_array(mysql_query($sql)); $count=$result['count']; 第二种方法:先取出,后统计 复制代码 代码如下: $sql=&

  • php 获取select下拉列表框的值

    给select 表单无素一个名字. 表单提交后 用 $_POST 或 $_GET 方式提交 $_POST['sel']或者$_GET['sel']获得选中的select的value值 复制代码 代码如下: if( $_POST ) { echo $_POST['select']; } ?> <form name="form1" enctype="multipart/form-data" method="post" action=&qu

  • php基础之连接mysql数据库和查询数据

    php基础之连接mysql数据库和查询数据

    连接数据库,有三种方法 1. 常规方式: $con=mysql_connect($dbhostip,$username,$userpassword) or die("Unable to connect to the MySQL!"); $db = mysql_select_db($dbdatabasename,$con); //执行语句 $qres=mysql_query("SELECT id,GoodsName FROM user"); //提取一条数据 11 $

  • Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

    Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

    初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新增页面 3.修改页面 把jquery easyui下载好之后,一般引用下页几

  • jQuery实现id模糊查询的小例子

    eg_1. 在页面中查找某id图片集合,先放到代码: 复制代码 代码如下: <div id="cacheLayerContainer-CBS-882" >    <img src="" id="CBS_1_0" style="width: 256px; height: 256px">    <img src="" id="CBS_1_1" style=&qu

  • 通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件

    复制代码 代码如下: //潇湘博客 //http://blog.csdn.net/fkedwgwy //PHP 技术群:37304662 //时间:2010-06-13 //版本 v3.0.0.0 //任意字符.中文与拼音综合查询 //方向键选择option //优化下拉框显示效果 //jquery超级select插件 $.fn.selectseach = function() { String.prototype.trim = function() { return this.replace(

  • thinkphp学习笔记之多表查询

    在操作过程中,两表查询都没有问题,但是三表查询就开始出现问题 有以下三张表,分表为pl表(uid,content),user表(id,username),lyb表(uid,title) 多表查询操作有以下几种方法: ㈠视图模型(推荐) 定义视图模型,只需要继承Think\Model\ViewModel,然后设置viewFields属性即可 public $viewFields = array( 'pl' =>array('uid','rid','content'), 'user' =>arra

  • PHP组合查询多条件查询实例代码第1/2页

    先向大家说明需求:按照我们系统的要求,我们将通过部门名称.员工姓名.PC名称.IP地址等等字段来进行组合查询从而得到想要的数据结果.那么,为了简单起见,我们用两个条件(部门名称.员工姓名)的组合查询来向大家说明这一技术技巧.当我们只输入部门名而员工姓名为空值时,那么部门内所有员工信息将被呈现,只有当你同时限制部门与员工姓名时,才能查询出唯一信息. 那就让我们开始. 首先建立查询页面search.php,不同于上次单一条件查询,这次我们需要两个条件的组合进行查询. <html> <body

  • jQuery 操作下拉列表框实现代码

    <select name="select1" id="select1" size="10"> <option value="1">Option1</option> <option valeu="2">Option2</option> <option value="3">Option3</option> &

  • JQuery+Ajax实现数据查询、排序和分页功能

    之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化:有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便.下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询.排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能. 先看下实现功能的代码: /**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewfor

  • ThinkPHP多表联合查询的常用方法

    ThinkPHP中关联查询(即多表联合查询)可以使用 table() 方法或和join方法,具体使用如下例所示: 1.原生查询示例: 复制代码 代码如下: $Model = new Model(); $sql = 'select a.id,a.title,b.content from think_test1 as a, think_test2 as b where a.id=b.id '.$map.' order by a.id '.$sort.' limit '.$p->firstRow.',

  • 利用jquery操作select下拉列表框的代码

    例: 复制代码 代码如下: <select id="sltList" name="list"> <option value="1">张三</option> <option value="2">李四</option> </select> // 获取当前选中的option值 $('#sltList').val() //获取当前选中项的文本 $('#sltLis

随机推荐