首页 > 其他分享 >HTML联动选择省份和城市,点击省份后城市数据相应更新

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

时间:2023-09-16 18:44:19浏览次数:28  
标签:provCityMap option -- 城市 provId HTML var 省份


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

相关文章

  • 原生HTML单页面使用vue框架
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=devi......
  • [转]全国城市邮编json格式
    使用时引入importcityfrom'./city.json'即可得到的city即可使用全国城市邮编json格式[{ "label":"北京市", "value":"110000", "children":[{ "label":"市辖区", "value":"110100&quo......
  • 9.HTML开发--在线投票:创建一个在线投票应用,允许用户投票给不同的选项。
    创建一个在线投票应用是一个有趣的项目,它可以让用户轻松地投票给不同的选项。以下是一个简单的HTML和CSS模板,你可以基于它创建你自己的在线投票应用:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wid......
  • 基于HTML+数据库的农产品销售系统-计算机毕业设计源码+LW文档
    摘 要随着互联网技术的发展,传统的农产品销售迎来了机遇,我国是个农业大国,如何推广农产品的销售是农产品企业非常关注的事情。随着电子商务多元化的发展,各地方特产、农产品逐渐转移到线上销售。在互联网的帮助下,带动农产品企业打开销路,促进农产品可持续发展。同时,通过农产品销售系......
  • 界面组件DevExpress WinForms v23.1亮点 - 全新升级HTML & CSS模板
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!DevExpressWinForm 控件已正式发布v23.1版本,此版......
  • HTML5教程之移动端Web页面布局
    一、什么是移动端项目顾名思义,运行在移动端的项目就称为移动端项目。那什么是移动端呢,主要是指我们的一些手持设备,最具有代表性的就是我们日常使用的手机和平板,当然还包括一些其他便携设备,如智能手表,掌上游戏机,等流动装置。二、为什么要学移动端布局随着科技的进步......
  • 个性404页面HTML源码分享
    分享的HTML与上图内容一样,需要修改的小伙伴可以自行修改内容。<style><!--@importurl("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");*{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline......
  • nginx 如何配置指向带有hash值的index.html文件?
    要在Nginx配置中指向带有哈希值的index.html文件,可以使用通配符(*)来匹配文件名中的哈希部分。以下是一个示例配置:location/{root/path/to/html/demo;indexindex.html;try_files$uri$uri//index.html;location~^/index\.(\w+)\.html${#使用......
  • html css dotted border 边框虚线太密
    三角形/**正三角*/.triangle{width:0;height:0;border-style:solid;border-width:025px40px25px;border-color:transparenttransparentrgb(245,129,127)transparent;}/**倒三角*/.triangle{width:0;height:0;border-style:solid;bor......
  • 南京民用汽车保有量与城市发展:数据背后的逻辑
     汽车保有量与城市发展:数据的背后随着城市化进程的不断加速,城市汽车保有量也在持续增长。这一现象在南京这样的城市中表现尤为明显。根据广郡通数据平台提供的数据,南京民用汽车保有量从2013年的140.41万辆一路攀升至2022年的306.54万辆,年均增长达14.7%。在分析这一数据的过......