二级联动两个下拉选项框，根据前一个下拉选项决定后一个下拉框内容 ======================

两个下拉选项框，根据前一个下拉选项决定后一个下拉框内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id=""></select>
    <select name="" id=""></select>

    <script>
        var sel1=document.getElementsByTagName("select")[0],
            sel2=document.getElementsByTagName("select")[1];
        
        var cities=["-请选择-","北京","南京","东京","西京","重庆"],
            counts=[
                ["-请选择-"],
                ["-请选择-","东城区","海淀区","通州"],
                ["-请选择-","玄武区","秦淮区","鼓楼区","雨花台区"],
                ["-请选择-","开封","汴京","龙亭区","杞县","兰考县"],
                ["-请选择-","西安","碑林区","未央区","长安区","临潼区"],
                ["-请选择-","渝中区","江北区","南岸区","渝北区","巴南区"]
            ]

        sel1.innerHTML="<option>"+cities.join("</option><option>")+"</option>";
        sel1.onchange=function(){ 
            var i=this.selectedIndex;
            sel2.innerHTML="<option>"+counts[i].join("</option><option>")+"</option>"
        }
        sel1.onchange();
    </script>
</body>
</html>