JavaScript、JQuery、Ajax实现级联菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市联动</title>
</head>
<body>
<!--onchange：改变事件；this：获取当前属性-->
<select id="province" onchange="cityAdd(this.value);">
<option value="0" selected="selected">--请选择--</option>
<option value="河南">河南</option>
<option value="浙江">浙江</option>
<option value="江苏">江苏</option>
<option value="台湾">台湾</option>
</select>
<select id="city">
</select>
</body>
<script type="text/javascript">
//暂时没有数据库,可以用数组存储
//全局变量
var provinceArray=new Array(4);
provinceArray[0]=["河南","郑州","开封","洛阳","信阳","南阳","固始"];
provinceArray[1]=["浙江","杭州","绍兴","宁波","诸暨"];
provinceArray[2]=["江苏","徐州","泰州","常州","无锡"];
provinceArray[3]=["台湾","台北","桃园","台南","高雄"];
function cityAdd(value){
/*
1.遍历二维数组
2.得到的第一个值与传过来的value比较
3.如果相同，获取后面的值
4.得到city的select标签
5.select添加option
-创建option标签
-创建文本
-将文本添加进option
-select.appendChild(option)
*/
/*
由于每次向option，都是在末尾添加，所以每次在末尾追加后，上一次追加的还在，
应当每次判断是否有option，如果有，用父节点删除
*/
var city=document.getElementById("city");
var cityOption=city.getElementsByTagName("option");
for(var i=0;i<cityOption.length;i++){
city.removeChild(cityOption[i]);
i--;
}
for(var i=0;i<provinceArray.length;i++){
var cityArray=provinceArray[i];
if(cityArray[0]==value){
for(var j=1;j<cityArray.length;j++){
var option=document.createElement("option");
var text=document.createTextNode(cityArray[j]);
option.appendChild(text);
city.appendChild(option);
}
}
}
}
</script>
</html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//json串
var pc={
beijing:['海淀','朝阳','昌平','西城'],
henan:['郑州','开封','洛阳','信阳'],
zhejiang:['杭州','绍兴','宁波','诸暨'],
taiwan:['台北','桃园','花莲','高雄'],
}
function addCity(value){
//清空二级下拉列表
$("#city").empty();
//获得你选中省份的所有城市的数组
var citys=pc[value];
//遍历添加
for(var i in citys){
var option=$("<option value='"+citys[i]+"'>"+citys[i]+"</option>");
$("#city").append(option);
}
}
</script>
</head>
<body>
<select id="province" name="province" onchange="addCity(this.value)">
<option selected="selected">---请选择省份---</option>
<option value="beijing">北京</option>
<option value="henan">河南</option>
<option value="zhejiang">浙江</option>
<option value="taiwan">台湾</option>
</select>
<select id="city" name="city">
</select>
</body>
</html>
页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
pageContext.setAttribute("path",path);
%>
<!DOCTYPE HTML>
<html>
<head>
<title>City</title>
<script type="text/javascript" src="${path}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//获取省市
$.ajax({
type:"GET",
url:"${path}/city/showCity.do",
dataType:"json",
success:function(data){
for(var i=0;i<data.length;i++){
$("#city").append($("<option value="+data[i].id+">"+data[i].name+"</option>"));
}
}
});
//初始化
$.ajax({
type:"GET",
url:"${path}/city/showArea.do",
data:"parentId="+110000,
dataType:"json",
success:function(data){
for(var i=0;i<data.length;i++){
$("#belong").append($("<option value="+data[i].id+">"+data[i].name+"</option>"));
}
}
});
$.ajax({
type:"GET",
url:"${path}/city/showArea.do",
data:"parentId="+110100,
dataType:"json",
success:function(data){
for(var i=0;i<data.length;i++){
$("#area").append($("<option value="+data[i].id+">"+data[i].name+"</option>"));
}
}
});
/* 给第一个select添加onchange事件 */
$("#city").change(function(){
//清空select
$("#belong").empty();
//获取选中省市的id
var parentId=$("#city option:selected").val();
//发送ajax请求
$.ajax({
type:"GET",
url:"${path}/city/showArea.do",
data:"parentId="+parentId,
dataType:"json",
success:function(data){
for(var i=0;i<data.length;i++){
$("#belong").append($("<option value="+data[i].id+">"+data[i].name+"</option>"));
}
}
});
});
/* 给第一个select添加onchange事件 */
$("#belong").change(function(){
//清空select
$("#area").empty();
//获取选中的id
var parentId=$("#belong option:selected").val();
//发送ajax请求
$.ajax({
type:"GET",
url:"${path}/city/showArea.do",
data:"parentId="+parentId,
dataType:"json",
success:function(data){
for(var i=0;i<data.length;i++){
$("#area").append($("<option value="+data[i].id+">"+data[i].name+"</option>"));
}
}
});
});
});
</script>
</head>
<body>
city:<select id="city">
</select>
belong:<select id="belong"></select>
area:<select id="area"></select>
</body>
</html>
控制层
package com.xpf.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.xpf.entity.City;
import com.xpf.service.CityService;
@Controller
@RequestMapping("city")
public class CityController {
@Autowired
private CityService cityService;
@RequestMapping("showCity")
public @ResponseBody List<City> showCity(){
return cityService.queryCity();
}
@RequestMapping("showArea")
public @ResponseBody List<City> showArea(Integer parentId){
return cityService.queryByParentId(parentId);
}
}
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
