<!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>