JavaScript实现简单的省市联动

js实现简单的省市联动


省市联动案例步骤:

  • 1:确定事件-onchange
  • 2:获取省下拉选框的对象
  • 3:获取省的值(一般由id号代替)
  • 4:由获取到的id号获取对应的市的数组
  • 5:获取市下拉选框对象
  • 6:将获取的市的数组通过innerHTML依次拼接到市下拉选框中
  • 7:清空上一次拼接的值
//定义二维数组
 <script>
    var arr=new Array(4);
    arr[0]=new Array("杭州市","温州市","湖州市","宁波市");
    arr[1]=new Array("成都市","达州市","南充市","宜宾市");
    arr[2]=new Array("沈阳市","锦州市","大连市","铁岭市");
    arr[3]=new Array("郑州市","开封市","洛阳市","南阳市");
<script>
//触发onchange事件的函数
function selectPro(){
    var proArrObj=document.getElementsByName("pro");
    var proVal=proArrObj[0].value;
    //alert(proVal);
    var cityArr=arr[proVal];
    //alert(cityArr);
    var cityObj=document.getElementsByName("city");
    cityObj[0].innerHTML="<option>-请选择-</option>";//清空

    for(var i=0;i<cityArr.length;i++){
	   cityObj[0].innerHTML+="<option>"+cityArr[i]+"</option>";
    }
}
//HTML页面主要代码
籍贯:
	<select name="pro" onchange="selectPro()">
			<option value="0">浙江省</option>
			<option value="1">四川省</option>
			<option value="2">辽宁省</option>
			<option value="3">河南省</option>
	</select>
				
	<select name="city">
			<option>-请选择-</option> 	
	</select>

效果图:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

感谢收看!!!

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值