二级联动AJAX

最新推荐文章于 2021-08-06 09:21:25 发布

原创最新推荐文章于 2021-08-06 09:21:25 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json

demo 同时被 2 个专栏收录

18 篇文章

订阅专栏

WEB前端

9 篇文章

订阅专栏

本文介绍了一种通过AJAX实现在网页表单中第一个下拉框选择改变时，动态更新第二个下拉框内容的方法。主要步骤包括：点击第一个下拉框触发AJAX请求，从服务器获取JSON数据；使用JavaScript解析JSON并填充第二个下拉框。

实现目标：

点击表单中第一个下拉框，动态替换第二个下拉框。

实现方案：

点击第一个下拉框后触发一个AJAX，从后台获取一个json，内容如List<object>.

具体步骤：

在java代码中返回json：

response.getWriter().print(JSONArray.fromObject(list));

在页面上代码如下：

function addjob_name(data) {
	        var obj=document.getElementById('job_id');  
	        var json = eval(data)  
	        for(var item in json){
	        {  
	           obj.add(new Option(json[item].job_name ,json[item].job_name));
	           
	        }