js实现的城市三层选择

最新推荐文章于 2024-02-29 17:11:46 发布
VIP文章 最新推荐文章于 2024-02-29 17:11:46 发布
阅读量2.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qpc672456416/article/details/79628294
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    window.onload = function () {
        var city = [
            {
                name: "江苏",
                children: [{
  name2: "南京", child: ["鼓楼区", "江宁区"]}, {
  name2: "连云港", child: ["海州区", "赣榆区"]}, {
                    name2: "苏州市",
                    child: ["姑苏区", "吴中区"]
                }]
            },
            {
                name: "山东",
最低0.47元/天 解锁文章
CR2018
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中国各大城市快速选择代码
06-24
js中国各大城市快速选择代码是一款可以在输入框中通过点击生成包含中国各个城市的下拉列表，进行快速选择，定位。
html+js实现选择对应省份下边的城市
weixin_45115654的博客
09-08 1749
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
省市js数据
m0_68956554的博客
02-29 544
【代码】省市js数据。
JS实现城市选择（详细讲解，步骤清晰）
WYF857446152的博客
05-23 4359
js实现城市选择功能
全国所有的省份及城市选择
zjf
01-28 3552
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档cities = new Object();cities[]=new Array(--请选择城市--);cities[北京]=new Array("东城区", "西城区", "崇文区", "宣武区", "
前端入门篇（五十一）JS应用5三级城市联动选择
安之ccy的博客
02-22 293
一个select，用数组的方式列出城市名称 <body> <select name="" id="prov"></select> <script> var prov = document.getElementById('prov'); var provList = ['北京','上海','广州'] for (var i = 0; i < provList.length; i++){
js递归控制树形选择到第三层
weixin_58224449的博客
10-18 557
控制树形结构选择单选，并且只能显示三层结构。
基于JS的瓦片三维电子地图系统的实现
04-30
在如今的大数据时代，各大城市、高校都在积极发展数字化和信息化，而三 维智慧校园工程是其中不可缺少的一个环节。而目前大多数的三维智慧校园的建 立所使用的开发平台的搭建都比较复杂，系统架构也比较传统。本文...
基于JavaScript的三维地图程序（仿e都市gis）
03-09
1.实现“鹰眼地图”不需移动，一幅可以看到见全景， 当主场景移动时，“鹰眼地图”只有小框在移动。 同时“小框”　主场景也在移动。 2009-12-17 1.测距功能事件配置 2009-12-21 1.完成测距功能 2009-12-22 1....
前端 vue3.0 + typescript 三维可视化数字城市数字孪生选用 cesium开源GIS 加入主流地图 Web
最新发布
04-13
前端开发中，结合Vue 3.0和TypeScript技术，实现了一款强大的三维可视化数字城市和数字孪生应用。通过整合开源GIS工具Cesium，为用户提供了丰富的地图数据展示和交互体验。利用WebGL技术，展现出流畅的地图效果，让...
javascript入门笔记
05-15
Javascript，简称为 JS，是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境： 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS解释器 JS的发展史： 1、1992年 Nombas 开发...
全国城市选择（JavaScript实现）
02-13
用JavaScript实现的三级全国城市选择，内附代码，可直接运行查看
js城市选择器
04-04
1、自动定位所在城市 2、热门城市列表展示 3、所有城市列表的展示
城市选择工具js
12-11
城市选择的js控件，有省，市区，镇县，三个选区选择。
js实现选择城市
07-16
js实现出发地城市，和目的地城市选择，类似于携程网。并且有拼音首字母分类选择。
纯JS---省份城市级联选择,
09-19
纯JS---省份城市级联选择,
assigment1
03-09
您将开发一个应用程序，以呈现外部JSON文件中描述的城市环境，用户必须通过配置面板将其上传。 JSON文件具有四层，描述了特定区域的建筑物，公园，水和表面的元素和颜色（请参见下文以获取文件的完整说明）。 您...
JS实现，利用两个下拉菜单，选择省份与对应城市
Jia_Peng_Tao的博客
06-05 5103
效果图 HTML页面代码部分 <body> 省份<select id="province" onchange="showCity()"> <option>省份</option> <option>河南</option> <option>山东</option> <option>广东</option> &lt
JS 城市选择实现——按级选中省市县/区
热门推荐
Ms_WangH
07-23 2万+
来自网络： https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new 效果图 实现 项目结构 city.js https://blog.csdn.net/qq_26416195/article/details/81114888 inde...
js实现二级地域选择
06-02
实现二级地域选择可以通过以下步骤实现： 1. 定义一个包含省份和城市数据的数组。 2. 创建两个下拉框，一个用于选择省份，另一个用于选择城市。 3. 给省份下拉框绑定 onchange 事件，在该事件中获取选择的省份，然后根据选择的省份动态生成城市下拉框中的选项。 4. 给城市下拉框绑定 onchange 事件，在该事件中获取选择的城市信息。 下面是一个简单的实现示例： HTML代码： ``` <label>省份：</label> <select id="province"> <option value="">请选择省份</option> <option value="1">广东省</option> <<option value="2">浙江省</option> </select> <label>城市：</label> <select id="city"> <option value="">请选择城市</option> </select> ``` JS代码： ``` // 定义省份和城市数据 var data = [ { province: "广东省", cities: ["广州市", "深圳市", "珠海市"] }, { province: "浙江省", cities: ["杭州市", "宁波市", "温州市"] } ]; // 绑定省份下拉框 onchange 事件 var provinceSelect = document.getElementById("province"); provinceSelect.onchange = function() { var province = provinceSelect.value; var citySelect = document.getElementById("city"); // 清空城市下拉框中的选项 citySelect.innerHTML = "<option value=''>请选择城市</option>"; if (province) { // 根据选择的省份生成城市下拉框中的选项 for (var i = 0; i < data.length; i++) { if (data[i].province === province) { var cities = data[i].cities; for (var j = 0; j < cities.length; j++) { var option = document.createElement("option"); option.value = cities[j]; option.text = cities[j]; citySelect.appendChild(option); } break; } } } }; // 绑定城市下拉框 onchange 事件 var citySelect = document.getElementById("city"); citySelect.onchange = function() { var city = citySelect.value; console.log("选择的城市是：" + city); }; ``` 在上面的代码中，data 数组中存储了省份和城市数据，当选择省份时，根据选择的省份动态生成城市下拉框中的选项。当选择城市时，会在控制台输出选择的城市信息。你可以根据自己的需求修改和扩展代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值