HTML
<!DOCTYPE html> <html> <head> <title>联动</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript" src="liandong.js"></script> </head> <body> <div> 省 : <select id="sheng"> <option value=""></option> <option value="HN">湖南省</option> <option value="GD">广东省</option> <option value="SC">四川省</option> </select> </div> <div> 市 : <select id="shi"> </select> </div> <div> 区/县 : <select id="xian"> </select> </div> </body> </html>JS 代码
$(function (){ var regions=[ {name:'HN',nameCN:'湖南省',sub:[ {name:'yzs',nameCN:'永州市',sub:[ {name:'qyx',nameCN:'祁阳县'}, {name:'lstq',nameCN:'冷水滩区'} ]}, {name:'css',nameCN:'长沙市',sub:[ {name:'txq',nameCN:'天心区'}, {name:'frq',nameCN:'芙蓉区'} ]} ]}, {name:'GD',nameCN:'广东省',sub:[ {name:'szs',nameCN:'深圳市',sub:[ {name:'lhq',nameCN:'龙华区'}, {name:'baq',nameCN:'宝安区'} ]}, {name:'gzs',nameCN:'广州市',sub:[ {name:'thq',nameCN:'天河区'} ]} ]}, {name:'SC',nameCN:'四川省',sub:[ {name:'cds',nameCN:'成都市',sub:[ {name:'xxxxx',nameCN:'xxxx县'} ]} ]}, ]; $("#sheng").change(function (){ var value=$(this).val(); var shi=[]; for (var i = 0; i < regions.length; i++) { var region=regions[i]; if(region.name==value){ shi=region.sub; break; } } var codes=[]; //codes.push('<option value="">选择市区</option>'); for (var i = 0; i < shi.length; i++) { var city=shi[i]; codes.push('<option value="'+city.name+'">'+city.nameCN+'</option>'); } $("#shi").html(codes.join("")); $("#shi").change(); }) $("#shi").change(function (){ var value=$(this).val(); var shengName=$("#sheng").val(); var shi=[]; for (var i = 0; i < regions.length; i++) { var region=regions[i]; if(region.name==shengName){ shi=region.sub; break; } } var codes=[]; for (var i = 0; i < shi.length; i++) { var city=shi[i]; if(city.name==value){ codes=city.sub; break; } } var code=[]; //code.push('<option value="">选择区县</option>'); for (var i = 0; i < codes.length; i++) { var xian=codes[i]; code.push('<option value="'+xian.name+'">'+xian.nameCN+'</option>'); } $("#xian").html(code.join("")); }) })转载请标明出处:jquery 下拉框 联动
文章来源: jquery 下拉框 联动