<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title>三级联动</title> ???</head> ???<body> ???????<div> ???????????<select id="province"> ???????????????<option value="">--请选择--</option> ???????????</select> ???????????<select id="city"> ???????????????<option value="">--请选择--</option> ???????????</select> ???????????<select id="county"> ???????????????<option value="">--请选择--</option> ???????????</select> ???????</div> ???????<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> ???????<script type="text/javascript"> ???????????$(function(){ ???????????????function initCity(){ ???????????????????$("#city").html(‘<option value="">--请选择--</option>‘); ???????????????} ???????????????function initCounty(){ ???????????????????$("#county").html(‘<option value="">--请选择--</option>‘); ???????????????} ???????????????var db = { ???????????????????????广东: { ????????????????????????珠海市: "珠海县1,珠海县2,珠海县3", ????????????????????????深圳市: "深圳县1,深圳,深圳县3", ????????????????????????广州市:"广州县1,广州县2,广州县3", ???????????????????}, ???????????????????????广西: { ??????????????????????????南宁市: "南宁县1,南宁县2,南宁县3", ??????????????????????????百色市: "百色县1,百色县2,百色县3", ??????????????????????????桂林市: "桂林县1,桂林县2,桂林县3", ???????????????????}, ???????????????????????江西: { ???????????????????????市1: "县1,县2,县3", ??????????????????????????市2: "县1,县2,县3", ??????????????????????????市3: "县1,县2,县3", ???????????????????} ???????????????}; ???????????????$.each(db , function(province){ ???????????????????$("#province").append("<option>" + province + "</option>") ???????????????}) ???????????????//一级变动 ???????????????$("#province").on("change",function(){ ???????????????????initCity(); ???????????????????initCounty() ???????????????????$.each(db, function(provice,val) { ???????????????????????if($("#province :selected").val() == provice){ ???????????????????????????$.each(val,function(city,counties){ ???????????????????????????????$("#city").append("<option>" + city + "</option>"); ???????????????????????????}); ???????????????????????????//二级变动 ???????????????????????????$("#city").on("change",function(){ ???????????????????????????????initCounty(); ???????????????????????????????$.each(val , function(city,counties){ ???????????????????????????????????if($("#city :selected").val() == city){ ???????????????????????????????????????var countArr = counties.split(","); ???????????????????????????????????????$.each(countArr , function(i,county){ ???????????????????????????????????????????$("#county").append("<option>" + county + "</option>"); ???????????????????????????????????????}); ???????????????????????????????????} ???????????????????????????????}) ???????????????????????????}) ???????????????????????} ???????????????????}); ???????????????}) ???????????}) ???????????????????</script> ???</body></html>jquery三级联动
原文地址：https://www.cnblogs.com/duanzhenzhen/p/10199262.html