java web 下拉列表联动的实现

很多时候在界面布局时我们会用到下拉列表，单独的一个列表与数据库的交互很简单

<select>    <option value="">--请选择--</option>    <c:forEach items="${systemList}" var="st" >        <option value="${st.systemKey}"> ${st.systemName} </option>    </c:forEach></select>

其中systeList 是从后台传过来的数据

在web层的控制类中

List<copysystem> systemList = ProService.getSystemList();model.addAttribute("systemList", systemList);

其中ProService 是 service 层的接口IProService 的

因为在service层没有什么操作，所以service层只是个过渡，过渡到Dao层

Dao层就是对数据库进行连接和查询，查询数据。

public List<copysystem> getSystemList() {    StringBuffer sql = new StringBuffer("");    sql.append("SELECT systemKey,systemName FROM xl_system");    return query(sql.toString(), new SystemrowMapper());}public class SystemrowMapper implements ParameterizedRowMapper<copysystem>{@Override    public copysystem mapRow(ResultSet rs, int rowNum) throws SQLException {copysystem sys = new copysystem();sys.setSystemKey(rs.getString("systemKey"));sys.setSystemName(rs.getString("systemName"));return sys;    }}

今天要记录的是当有多个下拉列表联动时，该怎样获取数据，即选择第一个下拉列表的值，动态的改变第二个下拉列表乃至更多列表的值。

那么 第一个下拉列表

<select id="search_systemKey"onchange="getmodule()" name="search_systemKey" class="input-medium">    <option value="">--请选择--</option>        <c:forEach items="${systemList}" var="st" >    <option value="${st.systemKey}"> ${st.systemName} </option></c:forEach></select>

第二个下拉列表

<select id="search_moduleKey" name="search_moduleKey" class="input-medium">    <option value="">--请选择--</option></select>

其中

onchange 在元素值改变时触发。

onchange 属性适用于：<input>、<textarea> 以及 <select> 元素。

所以当元素值改变时，触发onchange事件，调用getmodule方法

<script type="text/javascript">    function getmodule() {        var systemKey=$("#search_systemKey").val(); //获得第一个列表元素的主键var obj=document.getElementById("search_moduleKey");//回去id为。。的html元素$.ajax({    type : 'GET',    contentType : 'application/json',    url : '/xiaolian/product/getmodule?systemKey='+systemKey, //调用后台控制类的方法    dataType : 'json',    success : function(data) {        obj.options.length=0;$.each(data.moduleList,function(i,item) {    obj.options.add(new Option(item.moduleName,item.moduleKey));         });    }        });    }</script> 

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

后面会看看大神关于AJAX的博客，然后复制过来

发现忘了写一个重要的方法，就是getmodel()

我们在web层写这个方法

public Map<String, Object> getmodel(String id,ServletResponse response){    List<SpePractices> speBeans = ResMngService.SpePracticesList(id);    Gson gson = new Gson();        try {    response.getWriter().print(gson.toJson(speBeans));} catch (IOException e) {    e.printStackTrace();}return null;}

也可以这样写

@RequestMapping("getmodule")@ResponseBodypublic Map<String, Object> getmodule(String systemKey){    Map<String, Object> modelMap = new HashMap<String, Object>();    List<copymodule> moduleList = ProService.getModuleListBysystem(systemKey);    modelMap.put("moduleList",moduleList);    return modelMap;}

这样写和架构有关