springmvc 下拉框联动

来源：互联网发布：淘宝能用信用卡支付吗编辑：程序博客网时间：2024/04/29 16:29

最近接触到，下拉列表联动的小功能(ie,谷歌,QQ这三个浏览器已经测试，其他的没弄，有谁测过其他的可以反应一下，谢谢)，自己研究了一下，下面贴一下代码和思路吧

springmvc的框架

东西很简单通过ajax来实现，动态填充下拉列表就是了

用到的jquery 版本

问题咨询加微信号Q：695438455

<script type="text/javascript" src="${ctx}/static/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

页面源码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ include file="/static/base/taglibs.jsp"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>${systemOption.systemTitle}</title><%@ include file="/static/base/head.jsp"%><script type="text/javascript" charset="UTF-8">$(function(){//触发的下拉框chang事件        $("#tclx").change(function(){            var tclx = $("#tclx").val();            $.ajax({                type:"POST",                url :"${ctx}/tdictypecon/listDictype",                data:{                                id:tclx                },                dataType:"json",                success:function(data){                    $("#tid").empty();                    $("#tid").append("<option value=''>----请选择----</option>");                    $.each(data,function(index,item){                    console.info("item:"+item.id);                    //填充内容                        $("#tid").append( "<option value='"+item.id+"'>"+item.text+"</option>");                    });                }            });        });                        $("#tid").change(function(){                    var tid = $("#tid").val();                        $.ajax({                type:"POST",                url :"${ctx}/tdictypecon/listDictypeAllld",                data:{                                tid:tid                },                dataType:"json",                success:function(data){                    $("#zdz").empty();                    $("#zdz").append("<option value=''>----请选择----</option>");                    console.info(data);                    $.each(data,function(index,item){                        $("#zdz").append( "<option value='"+item.id+"'>"+item.text+"</option>");                    });                }            });        });            });</script></head><body><table border="1"><tr><td>触发控件</td><td colspan="2"><select id="tclx" style="width: 100px;"><option value="">请选择</option><option value="7">111</option><option value="7">222</option></select></td></tr><tr><td>一级</td><td><select id="tid" style="width: 100px;"></select></td><td>二级</td><td><select id="zdz" style="width: 100px;"></select></td></tr></table></body></html>

后台的一些方法

public void listDictypeAllld(TDicvalue td,HttpServletRequest request, HttpServletResponse response) {Map map=new HashMap();map.put("tid", td.getTid());List<TDicvalue> data = tdicvalueserv.selectByTidld(map);response_write(data, response);}

protected void response_write(List json, HttpServletResponse response) {try {JSONObject result = new JSONObject();response.setCharacterEncoding("UTF-8"); //设置编码格式//response.setContentType("application/json;charset=utf-8");response.getWriter().write(result.toJSONString(json));logger.info("json::::::" + result.toJSONString(json));response.getWriter().flush();} catch (IOException e) {// logger.error(e.getLocalizedMessage(),e);}}

0 0