php列表框怎么用,PHP+Mysql+jQuery查询和列表框选择操作实例讲解
这篇文章主要介绍了PHP+Mysql+jQuery查询和列表框选择操作实现过程,需要的朋友可以参考下
本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加入到已选区,可以用在许多后台管理系统中。本文列表框的操作依赖jquery插件。
HTML
说明,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
本例中只加载了Multiselect插件所需的样式文件,其他CSS大家可以自行设计。
JAVASCRIPT
首先需要引用本例所需的两个js文件。
接着我们来调用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.="".$row['username']."-".$row['phone']."";
}
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+Mysql+jQuery查询和列表框选择操作实例讲解相关推荐
- 如何通过js获取html文本框中的值,js与jquery获取input输入框中的值实例讲解
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...
- php mysql实现办公留言系统_传智播客html css php+mysql实现办公留言系统 呱呱网站源代码实例讲解...
php教程 当前位置:主页 > php教程 > 传智播客html css php+mysql实现办公留言系统 呱呱网站源代码实例讲解 传智播客html css php+mysql实现办公留 ...
- MySQL笔记-查询进程列表(查客户端IP、使用的用户、当前状态、ID号、使用的库)及断开客户端连接
查询进程列表: SELECT * FROM information_schema.processlist 这里ID就是客户端连接到MySQL的ID号,USER为连接的用户,HOST为客户端主机号,DB ...
- mysql php pdo例_PHP的PDO操作实例
try{ $dbms='mysql'; //数据库类型 ,对于开发者来说,使用不同的数据库,只要改这个,不用记住那么多的函数 $host='127.0.0.1'; //数据 ...
- python 无序列表中第k大元素_查询无序列表中第K小元素
当需要在无需列表中寻找第k小的元素时,一个显然的方法是将所有数据进行排序,然后检索k个元素.这种方法的运行时间为O(n log(n)). 无序列表调用分区函数将自身分解成两个子表,其长度为i和n-i. ...
- python日历下拉框_c#教程之C#日历样式的下拉式计算器实例讲解
https://www.xin3721.com/eschool/python.html 本文介绍了如何在Visual Studio中创建用户控件来显示下拉式计算器,弹出效果类似于日历控件. 介绍 如果 ...
- [MySQL | Python] MySQL子查询及其对于的Python操作
目录 1 标量子查询 2 关联子查询 3 普通子查询 导入数据 分别在MySQL和Python中导入数据. import pandas as pd milk_tea = pd.read_excel(' ...
- MySQL数据库查询重复数据办法
MySQL数据库查询重复数据办法 只操作一个列数据找出重复 select * from table1 where v1 = X group by column1 having count(*)> ...
- JQuery 查询文档元素
JQuery jQuery 为web脚本编程提供了通用的抽象层,使得它几乎用于任何脚本编程的情形. jQuery 能够满足如下功能: l 取得页面的元素 l 修改页 ...
最新文章
- 【Ubuntu】dpkg-deb -c :查看deb文件中的内容
- Hadoop HBase概念学习系列之HRegion服务器(三)
- tensflow中加载 fashion_mnist 数据集时
- PAT甲级题目翻译+答案 AcWing(数学)
- Linux学习记录-7
- 什么是Starter
- Python函数式编程中map()、reduce()和filter()函数的用法
- asp.net core轻松入门之MVC中Options读取配置文件
- centos8启动zk集群失败:zk Error contacting service. It is probably not running.
- 小米9来袭 雷军微博疯狂暗示:有望MWC亮相?
- 排序算法汇总(C/C++实现)
- 基于Rainbond开发Python云原生应用
- 一个博友的SQL问题解决过程
- JAVA中在switch语句里使用枚举
- c语言数据结构和数据类型_C语言中的数据类型
- Java素数怎么判断
- idea在mac版怎么配置svn_Mac安装svn客户端
- 视频教程-excel VBA编程番外篇(字典+正则表达式+FSO)-Office/WPS
- 计算机桌面桌面设置动态视频,电脑怎么设置动态桌面?电脑设置动态视频桌面图文教程...
- 预测控制(一):MPC轨迹跟踪
热门文章
- 如果有一天生你养你的两个人都走了
- html 访问节点,HTML DOM 访问节点
- 二分法在数组内查找数c语言,C++二分法在数组中查找关键字的方法
- scrt如何切换成英文版_英文版SecureCRT显示乱码解决
- 首款鸿蒙系统终端n,荣耀智慧屏正式发布,首款搭载鸿蒙系统终端,家庭C位新选择...
- java程序日期转换_Java 日期转换详解及实例代码
- php socketconnect连接失败_PHP设计模式之模板方法模式
- 十年总结,一个JAVA人的十年人生路
- VS2019注释整段代码
- mysql 重置root密码 远程访问_重置mysql的root密码以及设置mysql远程登陆权限