当前位置: 首页 > news >正文

ajax省市联动数据库版demo

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市联动数据库版</title>
</head>
<script type="text/javascript">
    $(function(){
        //当页面加载时候获取省份数据
        var uri = "${pageContext.request.contextPath}/selectPro";
        //发送ajax
        $.get(uri,function(date){
            //获取省份对象
            var $pro = $("#proId");
            //遍历
            $(date).each(function(){
                $pro.append($("<option value="+this.provinceid+">"+this.name+"</option>"))
            });
        },"json");
        //为省份派发change事件
        $("#proId").change(function(){
            //获取省份id
            var $pid = $(this).val();
            //如果是请选择省份,则清除城市
            if($pid=="请选择省份"){
                $("#cityid option:gt(0)").remove();
            }
            //发送ajax查询城市
            $.get("/day15/selectCity",{"pid":$pid},function(date){
                $city = $("#cityid");
                if(date != null){
                    $(date).each(function(){
                        $city.append($("<option value="+this.cityid+">"+this.name+"</option>"))
                    });
                }
            },"json");
        });
    });
</script>
<body>
    <select id="proId" name="province">
        <option>请选择省份</option>
    </select>
    <select id="cityid" name="city">
        <option>请选择城市</option>
    </select>
</body>
</html>

转载于:https://my.oschina.net/xhe2016/blog/831358

相关文章:

  • SpringMVC框架Request请求-contentType设置与配置
  • Win7配置SVN详细步骤(服务器和客户端)
  • Dell服务器raid5的在线扩容
  • Android Studio——gradle同步出错:MALFORMED
  • BizTalk Server 2010高可用方案
  • linux下如何设置环境变量PATH
  • tcp-time-wait-state
  • MYSQL5.5源码安装 linux下
  • JDK8的流式数据处理
  • Web设计流程优化:网页效果图设计新思路
  • Android稳定性测试工具Monkey的使用
  • 基于C#的MongoDB数据库开发应用(4)--Redis的安装及使用
  • jz2440上内核和文件系统移植
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 事务隔离(二):基于加锁方式的事务隔离原理
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • codis proxy处理流程
  • Create React App 使用
  • es的写入过程
  • IDEA 插件开发入门教程
  • Sass 快速入门教程
  • Yeoman_Bower_Grunt
  • 彻底搞懂浏览器Event-loop
  • 多线程事务回滚
  • 跨域
  • 扑朔迷离的属性和特性【彻底弄清】
  • 浅谈Golang中select的用法
  • 三栏布局总结
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • (Forward) Music Player: From UI Proposal to Code
  • (附源码)springboot高校宿舍交电费系统 毕业设计031552
  • (附源码)ssm跨平台教学系统 毕业设计 280843
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (学习日记)2024.03.12:UCOSIII第十四节:时基列表
  • (一)appium-desktop定位元素原理
  • (转)清华学霸演讲稿:永远不要说你已经尽力了
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • ***利用Ms05002溢出找“肉鸡
  • *1 计算机基础和操作系统基础及几大协议
  • .Net CF下精确的计时器
  • .NET3.5下用Lambda简化跨线程访问窗体控件,避免繁复的delegate,Invoke(转)
  • @data注解_SpringBoot 使用WebSocket打造在线聊天室(基于注解)
  • @ModelAttribute注解使用
  • @vue/cli 3.x+引入jQuery
  • [android] 练习PopupWindow实现对话框
  • [hibernate]基本值类型映射之日期类型
  • [HUBUCTF 2022 新生赛]
  • [IDF]啥?
  • [Machine Learning] 领域适应和迁移学习
  • [MFC] VS2013版本MFC工程移植到VC6.0上
  • [MySQL数据库部署及初始化相关]
  • [noip2015 d1t2] 信息传递
  • [POJ 1915] Knight Moves
  • [Python学习笔记]Requests性能优化之Session