二级联动的实现

二级联动的实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function loadInfo(){
		var shengId=document.getElementById("sheng").value;
		shi.options.length=0;  // 删除所有市下拉框的选项
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				alert(xmlHttp.responseText);
				var dataObj=eval("("+xmlHttp.responseText+")");
				for(var i=0;i<dataObj.rows.length;i++){
					var o=dataObj.rows[i];
					shi.options.add(new Option(o.text,o.id));
				}
			}
		};
		xmlHttp.open("get", "getAjaxInfo?action=ejld&shengId="+shengId, true);
		
	    xmlHttp.send();
	}
</script>
</head>
<body>
省：
<select id="sheng" onchange="loadInfo()">
	<option value="1">江苏省</option>
	<option value="2">山东省</option>
	<option value="3">浙江省</option>
</select>
&nbsp;&nbsp;
市
<select id="shi">
</select>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>HeadFirstAjaxJsonChap02</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>getAjaxInfoServlet</servlet-name>
  	<servlet-class>com.web.GetAjaxInfoServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>getAjaxInfoServlet</servlet-name>
  	<url-pattern>/getAjaxInfo</url-pattern>
  </servlet-mapping>
</web-app>

package com.java1234.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetAjaxInfoServlet extends HttpServlet{

	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		String action=request.getParameter("action");
		if("ejld".equals(action)){
			this.ejld(request, response);
		}
		
	}

	
	private void ejld(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out=response.getWriter();
		String shengId=request.getParameter("shengId");
		JSONObject resultJson=new JSONObject();
		JSONArray jsonArray=new JSONArray();
		JSONObject temp=null;
		switch(Integer.parseInt(shengId)){
			case 1:{
				temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);
				break;
			}
			case 2:{
				temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);
				break;
			}
			case 3:{
				temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);
				break;
			}
		}
		resultJson.put("rows", jsonArray);
		out.println(resultJson);
		out.flush();
		out.close();
	}
	
}

js生成下拉选项，动态生成二级字典项

选择一个部门，那么职位的下拉框要展示这个部门下特定的职位。

setZw();
$("#SY_DDTX-infoForm-DDTX_DEP").change(function(){
	setZw();
});

function setZw(){
	$.each($("#infoForm-DDTX_POSI option"),function(index,obj){
		if(index!=0){
			$(obj).remove();
		}
	});
	var url = Leopard.getContextPath() + "/queryZwList.act";
	var bmId =  document.getElementById("infoForm-DDTX_DEP").value;
    var paramData = {"bmId":bmId};//"{bmId:" + bmId + "}";
    var jsonObj = getData(url,paramData);
	for(var i=0;i<jsonObj.length;i++){
		if(jsonObj[i].data.NAME==DDTX_POSI){
			$("#infoForm-DDTX_POSI").append("<option selected='selected' value='"+jsonObj[i].data.NAME+"'>"+jsonObj[i].data.NAME+"</option>");
		}else{
			$("#infoForm-DDTX_POSI").append("<option value='"+jsonObj[i].data.NAME+"'>"+jsonObj[i].data.NAME+"</option>");
		}
	}
}

后台查询Controller

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class SyDdtxController {
	@RequestMapping(value = "/queryZwList")
	@ResponseBody
	public List<IBean> queryZwList(HttpServletRequest request, String bmId) {
		String sql = "select * from SY_ZW where CODE = ?";
		List<IBean> itemsList = SqlUtil.getExecutor().queryForList(sql, bmId);
		return itemsList;
	}
}

猜你喜欢