省市二级联动

xiaoxiao2021-02-28  86

这是我的第一篇博客,这个省市二级联动是工作中用到,现在写出来记录一下,有写的不好的地方请指教。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="province" id="province"> <option>-请选择省份-</option> </select> <select name="city" id="city"> <option>-请选择城市-</option> </select> <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript" src="data.js"></script> <script> $(function () { // 获取省数据 var provincedata=_areaselect_data["p"]; // 获取城市数据 var citydata=_areaselect_data["c"]; // 点击第一个select框加载省列表 $("#province").click(function () { if($(this).children().length==1){ ProvincePanel(); } }); // 改变省时加载市列表 $("#province").change(function () { var a1=$("#city").children().length; for(var i=a1-1;i>0;i--){ $("#city>option")[i].remove(); } var province=$("#province").val(); CityPanel(province); }); // 省列表 function ProvincePanel() { var option=""; for (var i=0;i<provincedata.length;i++){ option+="<option>"+provincedata[i]+"</option>" } $("#province").append(option); } // 市列表 function CityPanel(province) { var option=""; for(var i=0;i<citydata[province].length;i++){ option+="<option>"+citydata[province][i]+"</option>" } $("#city").append(option); } // 当市改变时获取当前的省市 $("#city").change(function () { var a1=$("#province").val(); var a2=$("#city").val(); console.log(a1); console.log(a2); }); }) </script> </body> </html>

第一次写,不知道引入的省市数据和jq怎么放

转载请注明原文地址: https://www.6miu.com/read-56752.html

最新回复(0)