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">&nbsp;</td>
<td colspan="3" class="mian_b_bg_lm">添加单元信息</td>
</tr>
<tr>
<td>&nbsp;</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%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="7%" valign="top">所属楼栋:</td>
<td width="60%">
 <select id="complexid" name="complexid" class="input_01">
 </select>
</td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</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%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top">房间数量:</td>
<td>
<input type="text" class="input_01" name="housecount" id="housecount" value=""></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<div align="center">
<input type="submit"  value="确认"  >
<input type="button"  value="取消" onclick="click()" >
<td>&nbsp;</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

时间: 2024-10-28 13:40:19

SSM + AJAX + JSON 动态下拉框的相关文章

如何用css3实现动态下拉框

* { margin: 0px; padding: 0px; font-family: "微软雅黑"; list-style: none; text-decoration: none } .test { width: 200px; height: 20px; background-color: greenyellow } .test:hover { height: 200px; background-color: green } 例如上面就是一个动态下拉框(虽然我添加了transiti

Select级联菜单,用Ajax获取Json绑定下拉框(jQuery)

需求类似这样  ↓ ↓ ↓   -->    菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: <script type="text/javascript"> $(function () { $("#TeamSelect").change(function () { var tid = $("#TeamSelect option:selected").val(); $.ajax({ url: "/ajax/a

使用ajax实现城市下拉框

在博客园学习了很多实用的东西,现在该慢慢开始自己写写博客文章, 由于本人水平有限,刚走出校园的小菜鸟,另外,文章在表述和代码方面如有不妥之处,欢迎批评指正.留下你 的脚印,欢迎评论! 有什么问题,可以互相探讨,希望对各位有所帮助.开始讲东西吧 一个现实城市下拉框的界面 html代码: <table> <tr> <td><h5>城市下拉框</h5></td> <td> <select id="selNatio

Ajax来实现下拉框省市区三级联动效果(服务端基于express)

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

ligerui多选动态下拉框

今天下午要求做一个支持多选的,并且插件用ligerui的,当时有点小懵了,因为没用过ligerui啊!而且按照API的介绍,我做得也很好啊,可是为什么就是显示不出来?据说有位小神比较厉害,请教来之,两个点过去了,依然无果................... 好吧,切入正题,首先要做一个ligerui的下拉框,必须在页面加载的时候就初始化一个下拉框来,要不你叫你妈来都不好使!(好吧,是我不会看API!) 先说说我现在的需求,我需要做一个类似于二级联动,有两个下拉框,一个是房屋类型,一个是房屋格局

ajax 遍历select 下拉框

html :<select id="type"   > </select> js代码: <script type="text/javascript">  //动态绑定下拉框项          function addnotice() {              $.ajax({                  url: "${pageContext.request.contextPath}/dictionary/j

ThinkPHP中ajax绑定select下拉框无法显示

html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过程中无法自动填充,下拉框有位置,却无法填充数据库的原因是 数据库的命名统一 一致,不能使用驼峰命名法来命名数据库的表的名字. 可以使用下划线,横线来命名表.

jsp动态下拉框和信息,css,信息为表格显示

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@page import="com.wbitech.zhsg.Config"%><

ajax实现下拉框(&lt;select&gt;)

许多页面上都涉及有下拉框,即select标签.对于简单的下拉框,被选择的数据是不需要改变的,我们可以用<option></option>写死.这样下拉框的数据永远都是那几条. 示例: 1 <select> 2 <option>信息一</option> 3 <option>信息二</option> 4 <option>信息三</option> 5 <option>信息四</optio