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>
标签:provCityMap,option,--,城市,provId,HTML,var,省份 From: https://www.cnblogs.com/songwmeta/p/17707106.html