给你一个JQ的三级联动：<!doctype html><html><head><title></title><meta charset = "utf-8"/></head><style></style><body><select id="one"><option value="">请选择省份</option></select><select id="two"><option value="">请选择城市</option></select><select id="three"><option value="">请选择区域</option></select><script type="text/javascript" src="js/jquery-1.12.0.js"></script><script type="text/javascript">/*1.搭建框架2.给省份和城市绑定change事件*/$(function(){var province = [{"name" : "广东省" ,"city" : [{"name" : "广州市" ,"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]},{"name" : "深圳市" ,"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]}]},{"name" : "浙江省" ,"city" : [{"name" : "杭州市" ,"area" : ["上城区","下城区","江干区","西湖区"]},{"name" : "丽水" ,"area" : ["莲都区","松阳县","遂昌县","云和县"]}]},{"name" : "江西省" ,"city" : [{"name" : "南昌市" ,"area" : ["东湖区","西湖区","青云谱区","湾里区"]},{"name" : "九江市" ,"area" : ["浔阳区","庐山区","瑞昌市","九江县"]},{"name" : "赣州市" ,"area" : ["章贡区","南康区","上犹县","赣县"]}]},];// 二级联动$("#two").change(function(){var one_index = $("#one option:selected").index();var two_index = $("#two option:selected").index();var three = $("#three");three.empty().append("<option>请选择区域</option>");if(two_index > 0){var area = province[one_index-1].city[two_index-1].area;for(var i = 0 ; i < area.length ; i++){three.append("<option>"+area[i]+"</option>");}}});// 一级联动$("#one").change(function(){var one_index = $("#one option:selected").index();var two = $("#two");console.log(one_index)two.empty().append("<option>请选择城市</option>");$("#three").empty().append("<option>请选择区域</option>");//清除if(one_index > 0){var city = province[one_index-1].city;console.log(province[one_index-1].city)for(var i = 0 ; i < city.length ; i++){two.append("<option>"+city[i].name+"</option>");}}});init();func
tion init(){for(var i = 0 ; i < province.length ; i++){$("#one").append("<option>"+province[i].name+"</option>");}}});</script></body></html>
阅读全文 >
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
