jQuery效果简单演示

1、二级联动，动态添加select标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<select name="sheng" class="select_pro">
    <option value="0" selected>省份</option>
    <option value="1">河南省</option>
    <option value="2">湖南省</option>
    <option value="3">云南省</option>
    <option value="4">河北省</option>
</select>
<!--<select name="shi" class="select_city"></select>-->
</body>
<script>
    var info = {"河南省":["郑州","洛阳","开封"],
                "湖南省":["湘潭","长沙","岳阳"],
                "云南省":["昆明","大理","曲靖"],
                "河北省":["衡水","保定","石家庄","承德","唐山","廊坊","张家口","邢台","邯郸","沧州","秦皇岛"]
    };
    var ele = document.getElementsByClassName("select_pro")[0];
//    console.log(ele);
    var ele_2;

    ele.onchange=function () {

        var arrs=ele.children;
//        console.log(arrs);
        var child_index = this.selectedIndex;
        var province= arrs[child_index].innerText;
        var citys_arr = info[province];
        console.log(citys_arr);
        if (citys_arr != undefined){
            var ele_1 = document.getElementsByClassName("select_city")[0];

            if (ele_1 == undefined){
                ele_2 = document.createElement("select");
                ele_2.setAttribute("class", "select_city");
                ele_2.name = "city";
                ele.parentElement.appendChild(ele_2);
            } else {
                ele_2 = ele_1;
                ele_2.options.length=0;
            }

            for (var i=0;i<citys_arr.length;i++){
                var option = document.createElement("option");
                option.value=i;
                option.innerText=citys_arr[i];
                ele_2.appendChild(option);
            }
        }else {
            if (ele_2){
            ele.parentElement.removeChild(ele_2);
            }
        }
//-----------------初始版本
//        var ele_1 = document.getElementsByClassName("select_city")[0];
////        console.log(ele_1);
//
//        if (ele_1 == undefined){
//            ele_2 = document.createElement("select");
//            ele_2.setAttribute("class", "select_city");
//            ele_2.name = "city";
//            ele.parentElement.appendChild(ele_2);
//        } else {
//            ele_2 = ele_1;
//            ele_2.options.length=0;
//        }
//
//        for (var i=0;i<citys_arr.length;i++){
//            var option = document.createElement("option");
//            option.value=i;
//            option.innerText=citys_arr[i];
//            ele_2.appendChild(option);
//        }
    };

    ele.onfocus = function () {
        console.log(this);
        if (ele_2){
            ele.parentElement.removeChild(ele_2);
        }

    }
    
</script>
</html>
二级联动