省级联动，so easy!!!

csdn00520

于 2019-07-10 16:30:17 发布

阅读量704

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/csdn00520/article/details/95348766

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省级联动</title>
</head>
<body>
<div id="dv"  >
    <select name="" id="pro">
        <option value="0" selected>请选择</option>
    </select>省
    <select name="" id="city">
        <option value="0">请选择</option>
    </select>市
</div>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    var sf =["河北","河南"];  //省份
    var shi=[ ["石家庄","邢台","邯郸"],["郑州","开封","洛阳"] ];
    $(document).ready(function () {
        //添加省份
        for(var i=0;i<sf.length;i++)
        {
            $('#pro').append(  $('<option></option>').val(i+1).html(   sf[i])  );
        }
        //选择省份  添加  市区
        $('#pro').change(function () {
            var index = $(this).val()-1;  //获取当前省份 索引
            $('#city').prop("length",1);  //清空原来省份所对应市的数据
            for(var j=0;j<shi[index].length;j++){ //根据省份  加载市的数据
                $('#city').append($('<option></option>').val(j+1).html( shi[index][j]  )  );
            }
        });
    });
</script>
</html>

csdn00520

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
省级联动，so easy!!!

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>省级联动</title></head><body><div id="dv" > <select name="" ...
复制链接

扫一扫