jQuery选择器实现地址的三级联动

最新推荐文章于 2023-03-17 17:07:56 发布

Shi_Yuan_Csdn

最新推荐文章于 2023-03-17 17:07:56 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/Shi_Yuan_Csdn/article/details/82117579

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jq/jquery-1.8.3.js"></script>
</head>
<body>
<select id="province" οnchange="provinceSelect(this)"></select>
<select id="city" οnchange="citySelect(this)"></select>
<select id="region"></select>
</body>
<script type="text/javascript">
    var list=new  Array(2);
    list["湖北省"]=["武汉市","襄樊市"];
    list["湖南省"]=["长沙市","浏阳市"];
    list["湖北省"]["武汉市"]=["洪山区","江夏区","武昌区","汉口区"];
    list["湖北省"]["襄樊市"]=["樊城区","襄城区"];
    list["湖南省"]["长沙市"]=["岳阳区","阳岳区"];
    list["湖南省"]["浏阳市"]=["浏阳区","阳浏区"];
    //给省份添加下拉列表添加省份值
    $(function(){
        var option = "<option value='请选择省份'>请选择省份</option>";
        //添加下拉
        $("#province").append(option);
        //遍历数组将省份添加到下拉框
        for(var op in list){
            var option = "<option value='"+op+"'>"+op+"</option>";
            $("#province").append(option);
        }
    });
    //将省份的城市添加到下拉框
      function provinceSelect(province){
          $("#city").empty();//清空
             $("#city").append("<option value='请选择城市'>请选择城市</option>");
            var  provinces = $(province).val();
          for(var i=0;i < list[provinces].length;i++){
              $("#city").append("<option value='"+list[provinces][i]+"'>"+list[provinces][i]+"</option>");
          }
      }
    function citySelect(city){
        $("#region").empty();
        $("#region").append("<option value='请选择区域'>请选择区域</option>");
        var  citys = $(city).val();
        var  provinces = $("#province").val();
        for(var i=0;i < list[provinces][citys].length;i++){
            $("#region").append("<option value='"+list[provinces][citys][i]+"'>"+list[provinces][citys][i]+"</option>");
        }
    }
</script>
</html>

Shi_Yuan_Csdn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器实现地址的三级联动

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="jq
复制链接

扫一扫