用JavaScript实现省市联动

最新推荐文章于 2022-08-05 20:23:56 发布
最新推荐文章于 2022-08-05 20:23:56 发布
阅读量896 收藏 2
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/banmengyou/article/details/80540648
版权

在平时如果注册QQ的话，选择地区会相应的出现该地区有哪些省市，这就需要用到数组，通过数组实现一个简单的联动。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
  var cityarr=[                               //定义数组市
           ['石家庄市','唐山市','保定市'],
           ['郑州市','开封市','洛阳市'],
           ['长沙市','株洲市','衡阳市']
           ]
  function loadCity(index){
            var selCity=document.getElementById('myCity');
            for(var j=selCity.options.length-1;j>=1;j--){
             selCity.removeChild(selCity.options[j]);
           }
            city=cityarr[index];
             for(var i=0;i<city.length;i++){
var option=document.createElement('option');
option.innerHTML=city[i];
document.getElementById('myCity').appendChild(option);
   }
       }

</script>

</head>

<body>
<select name="" id="" οnchange="loadCity(this.value)">//下拉列表框
   <option value="">======省======</option>//省
<option value="0">河北省</option>
<option value="1" >河南省</option>
<option value="2">湖南省</option>
</select>
<select name="" id="myCity">
        <option value="">======市======</option>       
</select>
</body>
</html>
banmengyou
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现省市联动效果
10-15
在JavaScript中实现省市联动效果是一种常见的前端交互功能，主要用于地理信息的选择，比如用户在填写地址时选择省份和城市。这种效果通常应用于表单或者搜索筛选等场景。下面我们将详细讲解如何利用JavaScript实现这...
原生js实现简单的省市区联动效果
沐小侠
11-03 3233
省市区实现思路： ① 一维数组 provinces 保存省、自治区和直辖市。 ② 二维数组 cities 保存对应省、自治区和直辖市下的所有城市，存储时要保证 cities[index]中 index 值与对应 provinces 中元素的下标索引相同。 ③ 同理，利用三维数组保存每个城市下的区域的所有区域。 ① 创建 HTML 表单，实现省份、城市、区域的下拉列表。 ② 创建数组保存省份城市区域的数据。 ③ 编写函数 createOption()用于创建指定下拉菜单的选项。
使用javaScript实现省市级联
noMarks的博客
10-16 727
在实际项目中,前端的下拉框组件是一定会使用到的,省市级联算是下拉控件的经典应用了.那么咱们就开始行动吧. 基本界面: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>省市级联</title> <styl...
前端简单入门第十四讲 使用JavaScript完成省市联动的效果
李阿昀的博客
05-05 2436
使用JavaScript完成省市联动的效果实际开发中大概总会碰到这样的需求：在注册页面上有两个下拉列表框，左侧省份的下拉列表框中的值一改变，右侧的市的下拉列表框中的值也要随之发生变化，也即省市联动。效果类似如下： 要使用JavaScript完成省市联动的效果，首先须知道以下知识点： JavaScript中创建数组的语法 JavaScript中的onchange事件 下拉列表框改变事件。欲完成
使用javascript实现省市联动小demo
u011248919的博客
10-10 1561
使用javascript实现省市联动小demo心得本人以前是学习Android的，也做了一段时间的Android开发。但是Android在长沙的的需求少，同时自身也没有达到这座城市动则三年经验的要求，所以决定转型到javaweb，javascript是我学习的第一步，觉得我说的不对的请指出。Android饱和了还有javascript！输入和输出也是最好的学习方法，给自己加油。本文中会涉及到的方法
js实现省市联动
热门推荐
纳兰小羽
04-29 2万+
<br />效果图如下：<br /><br />思路很简单，就是先加载省信息，然后当省改变的时候加载市县信息。烦的是数据的录入，代码如下<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta ht
解决JavaScript实现省市联动过程中的bug
10-18
在JavaScript实现省市联动的过程中，经常会遇到一些bug，这些问题主要集中在数据加载、事件处理以及回显数据的正确填充上。下面我们将详细讨论这些常见问题及其解决方案。 1. **初始化加载省份**： 在JavaScript中...
JavaScript省市联动实现代码
10-26
JavaScript省市联动实现是一种常见的...以上就是JavaScript实现省市联动的基本思路和关键步骤。在实际开发中，为了提高用户体验，还可以考虑添加异步加载数据、错误处理、优化数据结构等方式来提升功能的完整性和性能。
JavaScript实现省市区三级联动
10-15
主要为大家详细介绍了JavaScript实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现省市级联效果
qq_40692113的博客
09-03 4434
在JS中利用数组实现省市级联效果 注意: 文章中的代码仅仅是为了实现功能,并没有将所有的省市都写出来 代码实现了省市级联的功能,但是还没有加载到网页中,所以在参考本文章代码后要注意这个细节 html代码: &lt;dl class="register_row"&gt; &lt;dt&gt;所在地区：&lt;/dt&gt; &lt;dd&gt;&lt;select ...
JavaScript实现省市县三级联动
10-15
JavaScript实现省市县三级联动代码，个人所写，有详细注释
js实现省市县级联完整特效实例
02-14
用js实现省市县级联效果的例子展示以及详细代码
javascript实现简单的省市区三级联动
12-11
当我们注册一个网站，会看到省市区三级联动，下面简单介绍一下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus:registered:"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <select id
简单JSON实现省市级联效果
11-03
简单实现js省市级联效果->>>>还在等待什么？->>>>javascript和json放在同个页面，方便查看。
js实现简单的三级城市联动
02-07
十分基础的三级城市联动，包含中国所有省，自治区、特区，省市区三级联动，仅做参考，应用到实际还需要根据要求修改。
Javascript特效之实现省市级联动
a271720559的博客
07-03 1661
Javascript特效之实现省市级联动我们在网上买东西经常会需要填地址，而在填地址的时候经常在输入省份时就会自动弹出对应省份下面的市，今天我们来看看怎么简单的通过js实现省市联动。效果图：在选择省份后，后面的下拉框会自动赋值为该省份下面的城市。实现思路：首先我们要预设置好每个省份下面有多少个城市，然后在根据省份对应的城市查询出来赋值给后面城市的下拉框。js代码：var where = new A...
JS实现省市级联
今天很快乐呀
09-03 1万+
现居住地： &lt;select id="selProvince" onchange="changeCity( )" style="width:100px"&gt; &lt;option&gt;--选择省份--&lt;/option&gt; &lt;/select&gt; &lt;select id="selCity" style=&qu
使用JavaScript实现省市县三级联动
lzy_55的博客
08-05 1887
js实现三级联动
JavaScript实现省份城市的三级联动
11-21
本文实例为大家分享了js实现省份城市的三级联动的具体代码，供大家参考，具体内容如下 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> select{ width: 80px; margin: 5px; } </style> [removed] // 省份数组 var provinceArr = ['上海', '江苏', '河北']; // 城市数组 var cityArr = [ ['上海市'],
springmvc实现省市联动
最新发布
02-17
Spring MVC是一种基于Java的Web开发框架，它提供了一种简单而灵活的方式来构建Web应用程序。实现省市联动是指在前端页面上选择省份后，根据选择的省份动态加载对应的城市信息。 下面是一种实现省市联动的方法： 1. 在前端页面上，使用HTML的<select>标签创建一个下拉框，用于选择省份。例如： ```html <select id="province" onchange="loadCities()"> <option value="1">北京</option> <option value="2">上海</option> ... </select> ``` 2. 在JavaScript中，编写一个函数`loadCities()`，该函数会在选择省份后被调用。该函数通过Ajax请求向后端发送选择的省份信息，并接收后端返回的城市信息。例如： ```javascript function loadCities() { var provinceId = document.getElementById("province").value; var xhr = new XMLHttpRequest(); xhr.open("GET", "/getCities?provinceId=" + provinceId, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var cities = JSON.parse(xhr.responseText); // 根据返回的城市信息更新城市下拉框 updateCities(cities); } }; xhr.send(); } ``` 3. 在后端，创建一个Controller处理`/getCities`的请求，并根据传入的省份ID查询对应的城市信息。例如： ```java @Controller public class CityController { @Autowired private CityService cityService; @GetMapping("/getCities") @ResponseBody public List<City> getCities(@RequestParam("provinceId") int provinceId) { return cityService.getCitiesByProvinceId(provinceId); } } ``` 4. 在CityService中，根据省份ID查询对应的城市信息。例如： ```java @Service public class CityService { @Autowired private CityRepository cityRepository; public List<City> getCitiesByProvinceId(int provinceId) { return cityRepository.findByProvinceId(provinceId); } } ``` 5. 在CityRepository中，定义查询方法，根据省份ID查询对应的城市信息。例如： ```java public interface CityRepository extends JpaRepository<City, Integer> { List<City> findByProvinceId(int provinceId); } ``` 这样，当选择省份时，前端页面会发送Ajax请求到后端，后端根据省份ID查询对应的城市信息，并将城市信息返回给前端，前端再根据返回的城市信息更新城市下拉框。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值