SSM + AJAX + JSON 动态下拉框
前台页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="../Admin/role/css/index.css">
<script type="text/javascript" src="../Admin/role/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function click() {
window.location.href = 'SelectAll.do';
}
$(function() {
$("#projectid").mouseleave(
function() {
var projectid = $("#projectid").val();
alert(projectid);
$.ajax({
url : "selectProject.do",
type : "POST",
dataType : "json",
data : {
projectid : projectid,
},
success : function(data) {
$('#complexid').empty();
$('#complexid').append("<option value=\"\">-------请选择楼栋-------</option>");
jQuery.each(data.complexList, function(i,item){
$('#complexid').append("<option value="+ item.cnumber+">"+ item.cnumber+"</option>");
});
return false;
},
});
});
});
</script>
</head>
<body class="mian_bj">
<div class="mian_top_01">
<div class="mian_top_r"></div>
<div class="mian_top_l"></div>
<div class="mian_top_c">
</div>
<form action="addUnit.do" method="post">
<div class="mian_b">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="mian_b_bg_xz">
<tr>
<td width="5%" class="mian_b_bg_lm"> </td>
<td colspan="3" class="mian_b_bg_lm">添加单元信息</td>
</tr>
<tr>
<td> </td>
<td width="7%" valign="top">所属项目：</td>
<td width="60%">
<select name="projectid" id="projectid" class="input_01">
<option value="">----------请选择所属项目--------</option>
<c:forEach var="project" items="${projectList}">
<option value="${project.id }">${project.name}</option>
</c:forEach>
</select>
</td>
<td width="25%"> </td>
</tr>
<tr>
<td> </td>
<td width="7%" valign="top">所属楼栋：</td>
<td width="60%">
<select id="complexid" name="complexid" class="input_01">
</select>
</td>
<td width="25%"> </td>
</tr>
<tr>
<td> </td>
<td width="7%" valign="top">单元编号：</td>
<td width="60%">
<input type="text" class="input_01" name="number" id="number" value=""> </td>
<td width="25%"> </td>
</tr>
<tr>
<td> </td>
<td valign="top">房间数量：</td>
<td>
<input type="text" class="input_01" name="housecount" id="housecount" value=""></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<div align="center">
<input type="submit" value="确认" >
<input type="button" value="取消" οnclick="click()" >
<td> </td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
后台接值
@ResponseBody
@RequestMapping("/selectProject.do")
public String selectProject(HttpServletRequest request,HttpServletResponse response){
Integer projectid = Integer.parseInt(request.getParameter("projectid"));
System.out.println("projectid"+projectid);
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put("projectid", projectid);
List<Complex> complexList=complexService.selectByProjectId(map1);
JSONObject json = new JSONObject();
json.put("complexList", complexList);
PrintWriter out;
try {
out = response.getWriter();
out.println(json.toString());
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
注意：需要导入json jar 包
转载于:https://www.cnblogs.com/ll0405/p/8280519.html
SSM + AJAX + JSON 动态下拉框相关推荐
- jqgrid的动态下拉框实现，并解决不能获取值的问题
使用jqgrid,要实现在单元格中的动态下拉框,废话不多说,上代码: var gridOption = $("#inLineItemEditList").jqGrid({url: ...
- Python selenium定位动态下拉框
Python selenium定位动态下拉框 1.下拉框元素需要点击控件才展示 这里可以使用XPAN定位到下拉框,使用driver.find_element(By.XPATH,"路径&quo ...
- Easyexcel生成excel并通过自定义注解实现下拉框以及动态下拉框(将数据库中的数据显示在excel下拉框中)
首先需要定义excel实体类 @Data @ColumnWidth(22) @HeadRowHeight(30) public class ExcelProductDTO {//动态下拉框,可以查询数 ...
- ajax里绑定框,Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
需求类似这样 ↓ ↓ ↓ --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: $(function () { $("#TeamSelect").chan ...
- bootstrap-table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.s ...
- php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
- ajax 遍历select 下拉框
html :<select id="type" > </select> js代码: <script type="text/javascr ...
- ajax验证下拉框,ajax 遍历select 下拉框(示例代码)
html : js代码: //动态绑定下拉框项 function addnotice() { $.ajax({ url: "${pageContext.request.contextPath ...
- 使用Ajax实现百度下拉框
百度下拉框 在使用百度搜索时,在输入框中输入部分文字后,下面会将与该文字相关的词组展示出来,该功能就可以使用ajax来实现. 注册输入框的onkeyup事件,该事件触发时,将输入框中填写的内容使用aj ...
最新文章
- 中国顶级 AI 研究者数量仅为美国 1/5：美国智库最新全球 AI 实力报告
- 【哈佛商评】关于数据分析，管理者的四个常规错误
- Scikit-Learn 与 TensorFlow 机器学习实用指南学习笔记 4 —— 数据探索与可视化、发现规律
- Android-电话录音服务
- mysql数据类型默认值_MySQL数据类型 - 数据类型默认值
- 停止坐井观天，是时候让“我个人认为”见鬼去了！
- 【JEECG技术博文】Local storage easyui extensions
- 凸优化第七章统计估计 7.5 实验设计
- STL的vector
- Netty自带的心跳机制——IdleStateHandler
- 开发类似vs的界面_C#会不会成为移动开发最便捷的语言？
- ARM各内核系列整型运算能力对比---DMIPS / MHz
- numpy中的array函数
- excel计算机求和函数,多条件求和、多条件计数、多条件查找……多了去了！
- npm publish 报错 403
- OneR算法的Python简单实现
- 《巴黎圣母院》 1.大厅 解读
- 【CG物理模拟】风筝模拟
- 最近做Jpeg编解码遇到的问题
- 2022-2028全球及中国NTC热敏电阻电缆行业研究及十四五规划分析报告