jQuery二级联动*本地

最新推荐文章于 2019-09-30 00:20:41 发布

AIBottle

最新推荐文章于 2019-09-30 00:20:41 发布

阅读量306

点赞数

分类专栏：下拉列表的联动

本文链接：https://blog.csdn.net/AIBottle/article/details/50947868

版权

下拉列表的联动专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-1.11.3.js"></script>
    <title>二级联动案例</title>
    <style>
        select {
            margin-left: 10px;
        }

        #province {
            margin-left: 0px;
        }
    </style>
</head>
<body>
<select id="province">
    <option>请选择</option>
    <option>吉林省</option>
    <option>辽宁省</option>
    <option>山东省</option>
</select>
<script>
    /*
     需求 - 省份列表中具有数据,城市列表中没有任何数据
     * 当用户选择了省份信息后,在城市列表中提供相对应的数据
     <select>元素的特点
     * <option>元素,无论设置value还是默认value
     */
    // 1. 获取省份列表,绑定onchange事件
    var provinceElement = document.getElementById("province");
    provinceElement.onchange = function(){
        // 清空城市列表
        if($(this).val()=='请选择'){
            $("#city").remove();
        }else{
            $("#city").remove();
            $("#province").after("<select id='city'></select>")
            var cityElement = document.getElementById("city");
            var opts = cityElement.getElementsByTagName("option");
            for(var z=0;z<opts.length;z++){
                cityElement.removeChild(opts[z]);
                z--;
            }
        }

        /*
         2. 得到用户选择的省份信息
         * 第一种
         * 根据id为province的select元素,查找所有option元素
         * 遍历得到的所有option元素
         * 使用if判断,哪个option元素具有selected属性
         * 第二种
         * 直接通过select元素的value属性值得到
         */
        var provinceValue = provinceElement.value;
        /*
         3. 根据不同的省份提供不同的城市信息(数组)
         * 吉林省 - 长春市,吉林市,松原市,四平市,通化市
         * 辽宁省 - 沈阳市,大连市,铁岭市,丹东市,锦州市
         * 山东省 - 济南市,青岛市,威海市,日照市,德州市
         */
        var cities;
        switch (provinceValue){
            case "请选择":
                cities = [];
                break;
            case "吉林省":
                cities = ["请选择","长春市","吉林市","松原市","四平市","通化市"];
                break;
            case "辽宁省":
                cities = ["请选择","沈阳市","大连市","铁岭市","丹东市","锦州市"];
                break;
            case "山东省":
                cities = ["请选择","济南市","青岛市","威海市","日照市","德州市"];
                break;
        }
        /*
         4. 解析数组的数据内容
         a. 遍历存储城市信息的数组
         b. 得到每个城市信息
         c. 创建<option>元素,将城市信息写入
         d. 将创建的<option>元素添加到城市列表中
         */
        for(var i=0;i<cities.length;i++){
            var cityValue = cities[i];
            var option = document.createElement("option");
            var textNode = document.createTextNode(cityValue);
            option.appendChild(textNode);

            cityElement.appendChild(option);
        }
    }
</script>
</body>
</html>

AIBottle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery二级联动*本地

html>html>head lang="en"> meta charset="UTF-8"> script src="js/jquery-1.11.3.js">script> title>二级联动案例title> style> select { margin-left: 10px; }
复制链接

扫一扫

专栏目录