二级联动，实现前一个select下拉框改变，后一个随之改变

最新推荐文章于 2024-06-16 01:11:10 发布

Yang_xinqiao

最新推荐文章于 2024-06-16 01:11:10 发布

阅读量6.9k

点赞数 3

分类专栏： java基础

本文链接：https://blog.csdn.net/Yang_xinqiao/article/details/82792428

版权

本文介绍了如何利用jQuery的Ajax功能，创建一个二级联动的示例。通过序列化list数据，结合特定jar包，实现当选择第一个下拉框时，第二个下拉框内容相应更新。

摘要由CSDN通过智能技术生成

今天学习了jQuery中的Ajax，简单的实现一个二级联动的实例，废话不多说，直接上代码

//这是jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery2.x/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
//直接调用getProvince()方法，开启整个js语句
	getProvince();
	//创建一个Ajax对象，创建方法在上一篇已经介绍了
	var ajax;
	function getAjax(){
		try{
			ajax=new XMLHttpRequest();
		}catch (e) {
			ajax=new ActiveXObject("Microsoft.XMLHTTP");
		}
		return ajax;
	}
	function getProvince(){
		ajax = getAjax();
		//使用get提交，将url和想要传递到后台的参数进行拼接，便于后台获取数据
		ajax.open("get","/java-9-20day/choose?name=province",true);
		//监听Ajax的状态变化
		ajax.onreadystatechange=function(){
			if(ajax.status==200&&ajax.readyState==4){
				//当Ajax对象状态为4，并且status为200时，responseText接收数据
				var data=ajax.responseText;
				//将接收到的字符串转换成json格式
				var json=JSON.parse(data);
				//循环得到的json数组，将值添加

最低0.47元/天解锁文章

Yang_xinqiao

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
二级联动，实现前一个select下拉框改变，后一个随之改变

今天学习了jQuery中的Ajax，简单的实现一个二级联动的实例，废话不多说，直接上代码//这是jsp代码&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 T...
复制链接

扫一扫