JavaScript下拉选择框实现省市区选择

代码如下：

HTML部分：

<div id="box1">

        <br>

        <p style="font-size: 25px;">请选择所在地区：</p>

        <label>

            省份：

            <select name="" id="s1">

                <option value="">--请选择--</option>

                <option value="北京市">北京市</option>

                <option value="上海市">上海市</option>

                <option value="湖南省">湖南省</option>

                <option value="陕西省">陕西省</option>

            </select>

        </label>

        <label>

            城市：

            <select name="" id="s2">

                <option value="">--请选择--</option>

            </select>

        </label>

    </div>

    <script type="text/javascript" src="js文件路径"></script>

</body>

JavaScript部分：

var city= [

    ["--请选择--"],

    ["海淀区","朝阳区","东城区","西城区"],

    ["黄浦区","徐汇区","嘉定区","普陀区"],

    ["长沙市","湘潭市","株洲市","岳阳市"],

    ["西安市","咸阳市","铜川市","延安市"]

];

var s1 = document.getElementById("s1");

var s2 = document.getElementById("s2");

s1.onchange = function(){
   

    s2.length = 1;

    console.log(this.selectedIndex);

    var index = this.selectedIndex;

    var a = city[index];

    for(var i = 0;i < a.length;i++){

        var option = new Option();
       

        option.value = a[i];

        option.innerHTML = a[i];

        console.log(a[i]);

        s2.appendChild(option);


    }

 
}

浏览器效果如下：

ps：这种方法只需要将第二级下拉列表内容放入数组中。