<%@ page language="java" contentType="text/html; charset=UTF-8" ? ? pageEncoding="UTF-8" isELIgnored="false"%> <%@ taglib uri="Oracle Java Technologies | Oracle" prefix="c"%> <%@ taglib uri="Oracle Java Technologies | Oracle" prefix="fn"%> <%@ taglib uri="Oracle Java Technologies | Oracle" 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 > |