PHP+AJAX2级联动下拉列表

最新推荐文章于 2021-08-06 03:33:56 发布
最新推荐文章于 2021-08-06 03:33:56 发布
阅读量3.5k 收藏
点赞数
文章标签： ajax php xmlhttprequest ajax框架 mysql function

 http://www.phpchina.com/bbs/thread-13376-1-1.html

PHP+AJAX2级联动下拉列表（简单好用）
由于大4了，接下来要忙找工作和学校一些繁琐的事情，接下来的1，2个月可能没有时间写原创作品，今晚再弄一个，希望大家喜欢，别忘了支持我哦！^_^。这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：
CODE:

var http_request=false;
  function send_request(url){//初始化，指定处理函数，发送请求的函数
    http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla浏览器
  http_request=new XMLHttpRequest();
  if(http_request.overrideMimeType){//设置MIME类别
    http_request.overrideMimeType("text/xml");
  }
}
else if(window.ActiveXObject){//IE浏览器
  try{
   http_request=new ActiveXObject("Msxml2.XMLHttp");
  }catch(e){
   try{
   http_request=new ActiveXobject("Microsoft.XMLHttp");
   }catch(e){}
  }
    }
if(!http_request){//异常，创建对象实例失败
  window.alert("创建XMLHttp对象失败！");
  return false;
}
http_request.onreadystatechange=processrequest;
//确定发送请求方式，URL，及是否同步执行下段代码
    http_request.open("GET",url,true);
http_request.send(null);
  }
  //处理返回信息的函数
  function processrequest(){
   if(http_request.readyState==4){//判断对象状态
     if(http_request.status==200){//信息已成功返回，开始处理信息
   document.getElementById(reobj).innerHTML=http_request.responseText;
  }
  else{//页面不正常
   alert("您所请求的页面不正常！");
  }
   }
  }
  function getclass(obj){
   var pid=document.form1.select1.value;
   document.getElementById(obj).innerHTML="<option>loading...</option>";
   send_request('doclass.php?pid='+pid);
   reobj=obj;
  }


这个程序的核心就是动态添加

[Copy to clipboard]
CODE:
<option>......</option>

服务器端是进行数据的检索，很简单：

[Copy to clipboard]
CODE:
<?php
  header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码
  $pid=$_GET['pid'];
  $db=mysql_connect("localhost","root","7529639"); //创建数据库连接
  mysql_query("set names 'GBK'");
  mysql_select_db("menuclass");
  $sql="select classname from menu where parentid=".$pid."";
  $result=mysql_query($sql);
  
  //循环列出选项
  while($rows=mysql_fetch_array($result)){
   echo '<option>';
      echo $rows['classname'];
   echo "</option>/n";
  }
?>

再看看列表页面的html：
CODE:
  <script language="javascript" src="ajaxmenu.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ajax2级联动菜单演示</title>
</head>
<body>
<form name="form1">
<select name="select1" id="class1" style="width:100;" onChange="getclass('class2');">
  <option selected="selected"></option>
  <option value="1">大类1</option>
  <option value="2">大类2</option>
</select>
<select name="select2"id="class2" style="width:100;">
</select>
</form>
</body>
</html>
xcyxl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
php+ajax二级联动
11-29
2. **AJAX请求**：当用户在省的下拉列表中选择一个选项时，`onchange`事件被触发，执行JavaScript函数。这个函数使用`XMLHttpRequest`对象或更现代的`fetch` API，向服务器发送一个GET或POST请求，携带当前选中的省...
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
10-28
在本文中，我们将探讨如何使用jQuery、PHP和MySQL来实现二级联动下拉列表。二级联动是一种常见的用户界面设计，常用于地区选择、类别筛选等场景，它可以提高用户体验，让用户能够快速定位到他们需要的信息。 首先，...
ajax 二级联动 php,Ajax如何结合php实现二级联动
weixin_36355328的博客
08-06 280
Ajax如何结合php实现二级联动发布时间：2021-06-25 10:16:28来源：亿速云阅读：64作者：小新这篇文章给大家分享的是有关Ajax如何结合php实现二级联动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下使用ajax,从php中获取数据html>Ajax案例一请选择山东省辽宁省吉林省请选择//1.为元素绑定onchange事件var...
php+mysql+javascript实现二级联动下拉框
邵奣晟的博客
11-01 6528
本例实现的内容是：一级下拉框是选择公司名的首字母，二级内容是首字母对应的所有公司。首先新建一个数据库名叫useradmin，创建两个数据表名叫com_charter 和company。com_charter存放的是首字母，有两个字段Charter_id 和charter，这里我是手动输入的数据，分别是1到26和A到Z，为了防止有数字开头的公司名，加了一个数据27 和‘123’company存放的是
PHP和Ajax实现二级联动下拉菜单（代码、详细注释）
永不停歇
12-07 3156
数据库 ............................................................................................................................... ................................................................
php+ajax 菜单二级联动
king2wang的博客
07-06 767
页面：调研品牌：&lt;select name="brand" id="brand"&gt; &lt;option value="0" id="b"&gt;请选择品牌&lt;/option&gt; @foreach($oBrands as $oBrand) &lt;option value="{{ $oBrand-&gt;i
php+ajax+mysql省市县三级联动(1张数据库).zip
06-06
这个"php+ajax+mysql省市县三级联动"的资源提供了一个基于PHP、Ajax和MySQL实现的示例，它可以帮助初学者理解如何在实际项目中应用这些技术。以下是对这个资源涉及的知识点的详细解释： 1. **PHP**: PHP是一种广泛...
jQuery ajax+PHP实现的级联下拉列表框功能示例
01-20
在本文中，我们将探讨如何使用jQuery AJAX和PHP来实现级联下拉列表的功能。这个功能常见于各种在线表单，特别是在需要用户选择地理位置时，如省份和城市。级联下拉列表允许用户先选择一个上级选项（如省份），然后...
Ajax+PHP二级联动下拉列表.rar
12-19
本案例“Ajax+PHP二级联动下拉列表”就是实现这一功能的一个实例。下面将详细解释这个技术组合的工作原理和实现步骤。 **Ajax（Asynchronous JavaScript and XML）** 是一种在无需刷新整个页面的情况下与服务器交换...
ajax+php十分简单好用的二级联动
04-21
这是php的二级无刷新联动，本人测试过 简单好用，只有一个页面，可以通过表单传递值 数据表用的是两个
php jquery ajax 多级联动菜单
php菜鸟技术天地
11-25 2343
目前只做了三级,要四、五级的，要自己修改 index.php代码 <?php include("sunland_config.php"); ?> AJAX Demo // setTimeout('showLoader()', 100);//这里要延迟一下，直接调用无法显示加载器 //显示加载器.for jQuery Mobile 1.2.
jquery+php实现select联动效果(两级联动)
a898712940的博客
11-01 3897
HTML代码：         {:__('选择科目')}:                                     {foreach name="subjectList" item="vo"}                 {$vo.name}                 {/foreach}                    
下拉列表框 联动效果
PHP&wahaha
07-03 1266
请选择 aa bb cc $("#big").change( function (){ // alert('good'); $('#small').load('2.php',{name:$("#big").val()},function(responseTxt,statusTxt,xhr){       if(statusTxt=="success"){
jquery + php实现二级联动
weixin_30485379的博客
05-24 95
以下是利用jquery、ajax、php实现下拉框的二级联动功能: 下拉框效果：，当选择学院后，系统会自动查询出相应的专业； 代码： html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 5 &l...
php ajax js写的 筛选框二级联动
lfx
07-06 507
需求分析： 老板让做一个三级菜单 ，一级菜单已经固定死， 所以需求就是通过点击渠道（二级），三级显示二级选项栏下面的参数 实现方式： 想了一想 ，小case，就是前端用ajax请求后台，后台传给前台正确的值，显示到下拉列表就ok了嘛 一：前端代码 下面是两个下拉列表，第一个是二级，第三个是三级，第二个设置一个点击事件onchange，也就是点击相应的下拉选项后走这个函...
利用ajax实现三级联动下拉列表
最新发布
05-26
好的，下面是利用ajax实现三级联动下拉列表的步骤： 1. 在HTML页面中创建三个select标签，分别代表省、市、县（或区）的下拉列表。 2. 在JavaScript中定义一个函数，用于获取省份数据。该函数会向服务器发送一个ajax请求，并将返回的数据填充到省份下拉列表中。 3. 在省份下拉列表中添加一个onchange事件，当用户选择省份时，该事件会触发一个函数。 4. 该函数会向服务器发送一个ajax请求，请求该省份下所有的城市数据，并将返回的数据填充到城市下拉列表中。 5. 在城市下拉列表中添加一个onchange事件，当用户选择城市时，该事件会触发一个函数。 6. 该函数会向服务器发送一个ajax请求，请求该城市下所有的县（或区）数据，并将返回的数据填充到县（或区）下拉列表中。 7. 完成以上步骤后，用户就可以通过选择三个下拉列表来完成三级联动选择。 下面是一个简单的示例代码，仅供参考： HTML代码： ``` <select id="province"></select> <select id="city"></select> <select id="county"></select> ``` JavaScript代码： ``` // 获取省份数据 function getProvince() { $.ajax({ type: "GET", url: "province.json", dataType: "json", success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#province").html(html); getCity(); } }); } // 获取城市数据 function getCity() { var provinceId = $("#province").val(); $.ajax({ type: "GET", url: "city.json", dataType: "json", data: { provinceId: provinceId }, success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#city").html(html); getCounty(); } }); } // 获取县（或区）数据 function getCounty() { var cityId = $("#city").val(); $.ajax({ type: "GET", url: "county.json", dataType: "json", data: { cityId: cityId }, success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#county").html(html); } }); } $(function() { getProvince(); // 初始化省份数据 $("#province").change(function() { getCity(); // 当省份变化时，获取城市数据 }); $("#city").change(function() { getCounty(); // 当城市变化时，获取县（或区）数据 }); }); ``` 说明： 1. 该示例中使用了jQuery库来简化ajax请求的操作。 2. 省份、城市、县（或区）数据的格式可以自行定义，示例中使用了json格式的数据。 3. 在实际应用中，服务器端需要根据请求参数返回相应的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值