ajax实现二级联动

最新推荐文章于 2022-01-02 08:21:45 发布
最新推荐文章于 2022-01-02 08:21:45 发布
阅读量316 收藏
点赞数
分类专栏： ajax 文章标签： ajax javascript 二级联动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011563656/article/details/62426487
版权
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>二级联动</title>
 </head>
 <body>
  <select id="province">
      <option>请选择</option>
</select>
<select id="city">
<option>请选择</option>
</select>
<script>
var xhr=getXhr();

     window.οnlοad=function(){
  xhr.open("get","08.php?state=1");
  xhr.send(null);
  xhr.onreadystatechange=function(){
          if(xhr.readyState==4&&xhr.status==200){
             var data=xhr.responseText;
var provinces=data.split(",");
 for(var i=0;i<provinces.length;i++){
                 var option=document.createElement("option");
var text=document.createTextNode(provinces[i]);
  option.appendChild(text);

  var province=docuemnt.getElementById("province");
   province.appendChild(province);  
 }
 }
  }
}

var provinceEle=document.getElementById("province");
     provinceEle.οnchange=function(){
        var city=document.getElementById("city");
var opts=city.getElementsByTagName("option");
for(var z=opts.length-1;z>0;z--){
               city.removeChild(opts[z]);
}
if(provinceEle!="请选择"){        
  xhr.open("post","08.php");
  xhr.send("state=2&province="+provinceEle.value);
  xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                var data=xhr.responseText;
var cities=data.split(",");
for(var i=0;i<cities.length;i++){
                   var option=document.createElement("option");
  var text=document.createTextNode(cities[i]);
  option.appendChild(text);
 
  city.appendChild(option);
}
}
        }
   }
     }
    function getXhr(){
       var xhr=null;
  if(window.XMLHttpRequest){
           xhr=new XMLHttpRequest();
  }else{
           xhr=new ActiveXObject('Microsoft.XMLHttp');
  }
  return xhr;
}    

</script>


08.php:

<?php
  $state=$_REQUEST['state'];
  if($state==1){
      echo '山东省,辽宁省，吉林省';
  }else{
     $province=$_POST['province'];
   switch (province){
  case "山东省":
     echo '青岛市,济南市,威海市,德州市,日照市';
     break;
  case "吉林省":
     echo '长春市,松原市,吉林市,通化市,四平市';
     break;
  case "辽宁省":
     echo '沈阳市,大连市,铁岭市,丹东市,锦州市';
 break; 
}
  }


?>


 </body>
</html>
Journey_Sh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP+ajax实现二级联动菜单功能示例
10-18
PHP与AJAX结合实现二级联动菜单功能的知识点包括如下几个方面： 1. 理解二级联动菜单的工作原理： - 二级联动技术是前端常见的交互方式，常用于表单元素中，比如在选择省份后动态地加载该省份下的城市选项。 - 该...
使用ajax实现二级联动
doaram123的博客
07-21 2566
首先想要实现的二级联动效果，页面加载时从数据库调取省份的名字，并显示在jsp页面上，改变省份时后面出现该省对应的城市； 第一步，页面加载时，省份名字显示，首先是使用jdbc连接技术，从数据库查询省的名字和编号，package com.dao;import java.sql.Connection; import java.sql.PreparedStatement; import java.sq
基于JQuery Ajax实现二级联动获取SpringMVC接口的数据(加上三级联动，详细一套)
SYJ的博客
01-02 419
一、本文实例为大家分享了ajax实现二级联动的具体代码，供大家参考(复制下来就可以用) 二、点我：切换到三级联动… 1.演示（gif） 2.数据表 CREATE TABLE `rikao_erjiliandong_category` ( `category_id` int(11) NOT NULL AUTO_INCREMENT, `category_name` varchar(32) COLLATE utf8mb4_unicode_ci DEFAULT NULL, `pid` int(11)
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
weixin_33892912的博客
02-26 297
首先我们需要先建立好数据库，将一些数据插入进去需要两张表：province：省份表city： 城市表如图：然后再在java中建立相关的实体类与之对应再然后，我们就能开始做jdbc的操作了public class ConnectionFactory {private static String driver;private static String url;private static Strin...
Ajax实现二级联动
wyy的博客
05-09 569
ajax02.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>二级联动</title> <base href="<%=request.getContextPath()+"/"%>"> <script type="text/javascript">
Ajax实现二级联动菜单
10-15
通过上述步骤，我们可以实现一个使用Ajax技术实现的二级联动菜单，它具有响应迅速、无需页面刷新、用户体验佳的特点。需要注意的是，为了保护用户隐私和服务器安全，实施这类功能时要确保对用户输入和服务器端代码...
Laravel框架基于ajax实现二级联动功能示例
10-17
在Laravel中实现基于ajax的二级联动功能，是指当用户在一个下拉列表（select）中选择一个选项时，根据这个选项的值动态地改变另一个下拉列表的可选项。这种功能在网页设计中非常实用，能够给用户提供更加友好和动态...
AJAX实现二级联动
qq_33210523的博客
05-23 1299
通过AJAX实现二级联动,先动态获取一级下拉列表,通过Onchange()事件,异步查询二级下拉列表内容,把内容写进标签,存入二级下拉列表中一级下拉列表动态获取列表内容 @ResponseBody @Permission("ST1000") @RequestMapping("/editParksite") public String editPosOperator(Pa
Ajax之二级联动
Programer0的博客
02-29 337
Ajax小练习：使用Ajax实现二级联动，具体代码如下： HTML代码 <select onchange="change(this.value)"> <option value="0">--请选择--</option> <option value="1">体育</option> &l...
jquery ajax实现省市二级联动
07-11
该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo，简单易懂，可以参考博客：http://blog.csdn.net/mockingbirds/article/details/46842327
一个和数据库关联的，二级联动菜单示例ajax实现
11-06
项目开发中经常用到的联动菜单，该示例代码用ajax实现 非常方便，下载后可以自行扩展
javascript.和ajax实现二级联动菜单
11-25
1、javascript实现二级联动：运用jsp标签拼写Javascript代码，实现一个二维数组，点击一级栏目时，查询二维数组里，符合一级栏目的value ，放到二级栏目里 2，ajax实现的二级联动：利用Ajax与后台程序实现异步交互，后台程序拼写JOSN字符串，发送到客户端。
Ajax两级联动效果以及具体代码
CAT
03-24 376
刚接触Java的同学们肯定会先接触前台的编码，我还记得我在大学时，感觉两级联动效果真的是很难很难，后来大三时，我的技术逐渐成熟，基础也扎实了，写两级联动也并不会太烧脑了，嘿嘿，接下来我将把我之前做的一个平台中设计两级联动的代码以及效果展示给大家，以供参考，如果有更简便的方法，欢迎留言给我。1.jsp页面中的前台显示，指定Id名称。2.当触发vipid的change事件后，将请求数据发送给后台，后台...
一个简单的基于AJAX的二级联动实例
RowandJJ
01-27 2614
效果： 1.选择省份后，自动加载省份对应的城市。 2.所有省份以及城市的信息保存在xml文件中。 原理： 当页面加载完毕后，XMLHttpRequest对象向一个servlet发出请求，请求省份及城市数据，获取数据后，将数据填充到对应的select标签中。提交表单后，表单也会请求另一个servlet处理该表单，获取城市与省份信息。 下面贴出代码：
ajax实现省市联动
weixin_42735880的博客
10-10 1257
jsp页面 &lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo
使用ajax+Jquery配合数据库实现下拉框的二级联动
nigelmaroon的博客
04-17 2381
数据库建school（学院表），major（专业表）用于获取的两个bean package SearchStu.beans; public class School { private String sid; public String getSid() { return sid; } publ...
使用Ajax和Jquery配合数据库实现下拉框的二级联动
热门推荐
Evan_QB的博客
07-19 2万+
首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province：省份表 city :          城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后，我们就能开始做jdbc的操作了 public class ConnectionFactory { private static String driver; private stat
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值