HTML联动选择省份和城市，点击省份后城市数据相应更新

合集 - Django(9)

1.虚拟环境安装Django2023-08-012.创建Python虚拟环境（win）2023-08-013.创建首个Django项目2023-08-014.模型：Django与Mysql交互2023-08-025.Django在dateTime-loca默认展示查询的日期时间2023-09-16

6.HTML联动选择省份和城市，点击省份后城市数据相应更新2023-09-16

7.Django quertset、set的序列化2024-01-078.Django客户端应用1向服务端应用2发送POST请求并接收解析数据2024-01-139.django slw项目2024-03-03

收起

1、python后端返回的数据：

provCityMap={'陕西省':['西安市','咸阳市']}

 

2、html：

 <ul class="list-unstyled news-one__meta">

                                <li style="width: 100%;">
                                    <select id="provId" name="provId" required="required" style="width: 100%; font-size: smaller;BORDER-TOP-STYLE: none;BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE:solid">
                                      <option value="">--请选择省份--</option>
                                      {% for prov in provList %}
                                      <option value="{{prov.id}}">{{prov.element}}</option>
                                      {% endfor %}
                                    </select>
                                </li>

                                <li style="width: 100%;">
                                   <select id="cityId" name="cityId" required="required" style="width: 100%; font-size: smaller;BORDER-TOP-STYLE: none;BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE:solid">
                                      <option value="">--请选择城市--</option>
                                    </select>
                                </li>


                            <script>
                              // 省份和城市的对应关系
                              var provCityMap = {{provCityMap|safe}};

                              // 省份下拉框发生改变时，根据选择的省份动态生成城市下拉框的选项
                              document.getElementById('provId').addEventListener('change', function() {
                                var provId = this.value;
                                var citySelect = document.getElementById('cityId');
                                citySelect.innerHTML = '<option value="">--请选择城市--</option>';
                                if (provId && provCityMap[provId]) {
                                  var cities = provCityMap[provId];

                                  for (var i = 0; i < cities.length; i++) {
                                    
                                    var option = document.createElement('option');
                                    option.value = cities[i].id;
                                    option.innerHTML = cities[i].element;
                                    citySelect.appendChild(option);
                                  }
                                }
                              });
                            </script>