实现简单的省市联动(通过HTML和JS)

通过HTML和JS实现简单的省市联动,包括具体思路和具体代码,仅供参考,具体内容如下:

一 思路分析:

1.准备省份与城市的下拉框

2.准备省份与对应城市基础的数据(省份用数组,城市用二维数组)

3.给省份下拉框填充数据

4.绑定省份下拉框的onchange事件

5.获取省份下拉框中被选中的选项的索引

6.通过被选中的索引,获取城市二维数组中对应的数组

7.将城市数组的数据填充到城市下拉框中

8.每次切换省份下拉框的选项时,将城市下拉框的选项调回默认值

二 具体代码:

第一部分:完整代码

    
    
        
        
        
        
        
    
    
    
        
        请选择地址:
        
            请选择省份
        
        
            请选择城市
        
        
        
        
    
    
    

第二部分 效果图

注意 :

        ①文中索引,也可以采取selectedIndex来获取省份下拉框被选中项的索引;

             eg示例: var index = document.getElementById('pro').selectedIndex;

        ②思路分析第8步骤,需要将innerHTML事件绑定在第四步之后,在onchang事件触发函数就需要调用,另不建议设置为空值,因为则这样修改省份下拉框选项时候会清楚城市下拉框的默认值;

        ③在JS里document.getElementById(),可以考虑用$方法来便捷操作;id 可以考虑用#,仅供参考

        ④基础数据数组方面,本文采取的二维数组,也可以采用对象类型：
                    var data = {
                        "上海市":["浦东新区","静安区","普陀区","闵行区"],
                        "江苏省":["南京市","苏州市","无锡市","常州市"]
                    }

可供参考:

代码截图

 省市联动初步效果链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持,谢谢!