如何实现三级省市联动,使用javascript实现省份城市的三级联动
本文实例为大家分享了爪哇岛实现省市区三级联动的具体代码，供大家参考，具体内容如下
我搭建的是地对地导弹(地对地导弹)框架：
一、实现三级联动
以省市区为例：我的想法很简单，可能想的有点少，首先遍历省份，当数据发生改变调用方法请求根据省的编号去查询市区的信息，当市区信息发生改变调用另一个方法去查询县区的信息
1、实体类entity：area
包com。htzn。实体；公共类区域{私有字符串id；私有字符串名称；私有字符串pid公共字符串getId(){返回id；} public void setId(String id){ this。id=id} public String getName(){ return name；} public void set name(String name){ this。name=名称；}公共字符串getPid(){ return PID；} public void setPid(String PID){ this。PID=PID} }2、接口层 dao
包com。htzn。道；导入Java。util。列表；导入com。htzn。实体。面积；公共接口AreaDao { //获取省的信息public ListArea获取省份()；//获取市区信息公共列表区getCity(整数PID)；//获取所有县区信息公共列表区getArea(整数PID)；}3、接口service层，(个人觉得两个接口层公用一个也行，就像那种公用一个的改为制图人接口层那种的也很方便，可能这样比较不规范吧)
包com。htzn。服务；导入Java。util。列表；导入com。htzn。实体。面积；公共接口区域服务{ public ListArea get province()；公共列表区getCity(整数PID)；公共列表区getArea(整数PID)；}4、接口实现类serviceImpl
包com。htzn。服务实施；导入Java。util。列表；导入org。spring框架。豆子。工厂。注释。自动连线；导入org。spring框架。刻板印象。服务；导入com。htzn。道。区道；导入com。htzn。实体。面积；导入com。htzn。服务。区域服务；@Servicepublic类AreaServiceImpl实现area service { @ Autowired area Dao area Dao；@ Override public ListArea get province(){//TODO自动生成的方法存根返回区刀。get省()；} @ Override public ListArea get city(整数PID){//TODO自动生成的方法存根返回区刀。获取城市(PID)；} @覆盖公共列表区获取区域(整数pid) { //TODO自动生成的英语字母表中第十三个字母
ethod stub return areadao.getArea(pid); }}5、控制器：contoller
package com.htzn.controller;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import com.htzn.dao.AreaDao;import com.htzn.entity.Area;@Controllerpublic class AreaController { //自动注入 @Autowired AreaDao areadao; //获取省份映射到页面 @RequestMapping("/getpervice") public String privce(Model model) { List<Area> list = areadao.getProvince(); model.addAttribute("province", list); return "arealist"; } //根据省份id获取对应市区 @ResponseBody @RequestMapping("/getcity") public List<Area> city(@RequestParam(value="pid",required=false) Integer id) { List<Area> city = areadao.getCity(id); return city; } //根据市区id获取相应的县区 @ResponseBody @RequestMapping("/getarea") public List<Area> area(@RequestParam(value="pid",required=false) Integer id) { List<Area> area = areadao.getArea(id); return area; }}6、最后映射页面：jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fm"%> <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></head><body> 省： <select name="province" id="province" onchange="changeCity()"><c:forEach items="${province }" var="list"> <option value="${list.id }" >${list.name }</option> </c:forEach> </select> 市： <select id="city" name="city" onchange="changeDistrict()"> <option value="">-- 请选择市 --</option> </select> 区（县）：<select id="district" name="district" onchange="changehidden()"> <option value="">-- 请选择县(区) --</option></select> --></body><script type="text/javascript"> function changeCity(){ //当省的内容发生变化的时候，响应的改变省的隐藏域的值 $("#phidden").val($("#province option:selected").html()); //页面加载完成，将省的信息加载完成 //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值 var pid = $("#province").val(); alert(pid); $.ajax({ url:"/sky-ssm/getcity", type:post, data:{"pid":pid}, dataType: "json", success:function(data){ //清空城市下拉列表框的内容 $("#city").html("<option value=>-- 请选择市 --</option>"); $("#district").html("<option value=>-- 请选择区/县 --</option>"); //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option> for(var i=0;i<data.length;i++){ var $option = $("<option value="+data[i].id+">"+data[i].name+"</option>"); $("#city").append($option); } }, error:function(data){ alert("失败了"); } }); } function changeDistrict(){ //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值 $("#chidden").val($("#city option:selected").html()); //页面加载完成，将省的信息加载完成 //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值 var pid = $("#city").val(); $.ajax({ url:"/sky-ssm/getarea", data:{"pid":pid}, dataType:"json", success:function(data){ //清空城市下拉列表框的内容 $("#district").html("<option value=>-- 请选择区/县 --</option>"); for(var i=0;i<data.length;i++){ var $option = $("<option value="+data[i].id+">"+data[i].name+"</option>"); $("#district").append($option); } } }); } function changehidden(){ //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值 $("#dhidden").val($("#district option:selected").html()); }</script></html>7、mapper.xml文件：
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.htzn.dao.AreaDao"> <resultMap id="BaseResultMap" type="com.htzn.entity.Area"> <!-- WARNING - @mbg.generated This element is automatically generated by MyBatis Generator, do not modify. This element was generated on Thu Jan 09 17:01:48 CST 2020. --> <id column="id" jdbcType="VARCHAR" property="id" /> <result column="name" jdbcType="VARCHAR" property="name" /> <result column="pid" jdbcType="VARCHAR" property="pid" /> </resultMap> <sql id="Base_Column_List"> <!-- WARNING - @mbg.generated This element is automatically generated by MyBatis Generator, do not modify. This element was generated on Thu Jan 09 17:01:48 CST 2020. --> id, name, pid </sql> <select id="getProvince" resultMap="BaseResultMap"> select <include refid="Base_Column_List" /> from area where pid = 0 </select> <select id="getCity" resultMap="BaseResultMap"> select <include refid="Base_Column_List" /> from area where pid = #{pid} </select> <select id="getArea" resultMap="BaseResultMap"> select <include refid="Base_Column_List" /> from area where pid = #{pid} </select> <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap"> <!-- WARNING - @mbg.generated This element is automatically generated by MyBatis Generator, do not modify. This element was generated on Thu Jan 09 17:01:48 CST 2020. --> select <include refid="Base_Column_List" /> from dept where id = #{id,jdbcType=INTEGER} </select></mapper>因为就是测试可不可行直接写的select下拉框，结果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持盛行IT。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。