html，省市联动

最新推荐文章于 2024-04-06 13:11:17 发布
最新推荐文章于 2024-04-06 13:11:17 发布
阅读量420 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38049721/article/details/72973118
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("石家庄","邯郸","保定","秦皇岛");
arr[1] = new Array("郑州市","洛阳市","安阳市","南阳市");
arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
arr[3] = new Array("长春市","吉林市","四平市","通化市");


function changePro(index){
//b.根据value的值获取所对应市的数组
var cityArr = arr[index];
//c.获取市的下拉选对象
var cityObj = document.getElementById("city");
//初始化
cityObj.innerHTML = "<option >--请选择--</option>";

//d.遍历市的数组,将每个市拼成option,将option插入到市的下拉选对象中
for(var i=0;i<cityArr.length;i++){
var optionObj = "<option>"+cityArr[i]+"</option>";
cityObj.innerHTML += optionObj;
}
}
</script>
</head>
<body>
<form action="#" method="get">
<input type="hidden" name="id" value="007"/>
姓名:<input name="username" value="xuduoduo"/><br>
密码:<input type="password" name="password"  value="123"><br>
性别:<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br>
爱好:<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br>
头像:<input type="file" name="photo"><br>
籍贯:
<select name="pro" οnchange="changePro(this.value)">
<option >--请选择--</option>
<option value="0">河北</option>
<option value="1">河南</option>
<option value="2">辽宁</option>
<option value="3">吉林</option>
</select>省
<select id="city">
<option >-请选择-</option>
</select>市
<br>
自我介绍:
<textarea name="intr" cols="40" rows="4">good!</textarea>
<br>
<input type="submit" value="保存"/>
<input type="reset" />
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
<!--

-->
qq_38049721
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 省市区三级联动数据库
06-18
html 省市区三级联动数据库　　html中实现三级联动是一个不错的demo，博主在这里跟大家分享一下实现的过程，以及自己在过程中出现的一些问题，仅供参考。 　　首先我们将全国的省市区数据导入进来，这里已经直接整理搜集好了。如下：
分别使用数组和JSON方式来实现省市级联效果
weixin_44424864的博客
09-22 2606
实现的效果，当点击省级的下拉菜单中的某一个省时，在城市的下拉菜单就会出现对应的城市。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>省市级联</title> </head> <body> <cen...
省市联动实现：jQuery和纯HTML两种方法，web前端开发h5
最新发布
2301_76379462的博客
04-06 125
(“#city”).append(“请选择”);var txt3=" M78星云";var txt1=" 济南市";var txt2=" 济宁市";var txt3=" 天津市";var txt2=" 彗星星";var txt1=" 火星";2.不使用jQuery。
二级联动省市mysql数据库_用JS实现简单的省市联动
weixin_42548752的博客
02-22 825
用JS实现简单的省市联动技术分析：使用 javascript 实现城市二级联动(onchange() 当下拉框变化时触发事件 createTextNode() 方法和 createElement() 方法以及 appendChild() 方法)。代码步骤：1、首先确定事件为 onchange() 事件,并为该事件绑定一个函数。书写该函数。2、创建一个二维数组。3、在判断用户选择的是哪一个省份。4、...
javascript加html实现简单省市联动
qq_44723175的博客
05-02 225
思路: 1.先写两个下拉选择框，一个是国家，一个是省 2.国家的下拉列表里定义onchange改变事件，事件里写一个add1(this.value)方法，表示当前改变的option里面的value值 3.创建一个二维数组，用来存储国家和城市。每个数组的第一个元素是国家名称，后面的元素是城市名 4.遍历数组，得到每个数组，将数组的第一个元素与传递过来的值进行比较，相同就获取第一个值后面的元素 5.得...
前端（HTML）——Ajax实现省、市、县联动
qq_52705208的博客
10-23 2128
前端数据、省市联动、Ajax技术、jQuery技术，javaweb，json
html省市联动
08-29
省市联动，非常常用的省市联动效果,html+js
省市区联动.html
08-15
一个HTML页面，非常简单，可直接运行，注意的是，省市区数据不全，可根据自己的需要添加数据。比网上看到的都要简单，而且容易理解
省市联动html
05-28
很简单的省市联动html表单代码。 也就是通过一个表单的选择影响另一个表单。
ajax实现省市联动
12-07
前端是html + javascript,后台使用php编写的。通过ajax技术实现省市联动效果。
JQuery+JSON的省市区三级联动效果
一个有故事的胖子
12-18 1173
html中只要简单的添加以下代码 <p>三级联动</p> <div id="city_4"> <select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist"...
全国省份、城市、区县最新联动JS html展示
12-16
最常用的省份、城市、区县最新联动JS html展示，拿来立马可以使用。
jquery省市县联动-完整数据-一个表单
07-29
jquery的省市县联动，数据完整，一个input框搞定。
JavaScrpit+Html实现省市联动(应用场景:输入地址信息)
zhx__的博客
12-27 538
JavaScrpit+Html实现省市联动(应用场景:输入地址信息) 文章目录JavaScrpit+Html实现省市联动(应用场景:输入地址信息)前言一、什么是JavaScrpit？二、什么是Css？三、什么是Html？四、JavaScrpit前端代码实现1.创建一个文本然后打开2.效果实现总结 前言 在目前我们的各个系统当中最重要的就是要保存客户的信息，这就包括地址信息等，肯定不会让客户去手动输入这样用户感体验极差，所以推出使用下拉框进行选择，这样可以有效的去维护和使用，下面介绍页面实现方式 提示
省市联动(前端，数组方式）
weixin_46098676的博客
09-23 158
html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市县联动</title> <script type="text/javascript" src="js/city.js" > </script> </head> <body> <select id="prov...
html级联搜索,html省市级联(select联动)示例源码
weixin_39715187的博客
06-07 392
【实例简介】【实例截图】【核心代码】//底层数据源var pro=['黑龙江','吉林','辽宁'];//次级数据源要使用二维数组var city=[['哈尔滨','佳木斯','齐齐哈尔','大庆','鹤岗'],['长春','四平','松原','吉林'],['铁岭','大连','沈阳']];function init(){loadpro();loadCity();}//加载省级的选择函数/*思路：...
HTML+JS实现省市区三级联动
小龙哒的博客
07-10 6421
在线调试预览 https://codepen.io/acelibin/pen/wGooev 1.html代码 <html> <head></head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> ...
html页面完成省市联动
rwh19951022的博客
06-26 1021
【代码】html页面完成省市联动。
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、付费专栏及课程。

余额充值