ajax两级联动下拉框（js）

以前觉得动态的下拉框特麻烦；今天自己写了一个js版的

动态往下拉框添加：

var cnamevalue=json[i].cname;

var optionElement = document.createElement("option");
optionElement.setAttribute("value",cnamevalue);
var cnameText = document.createTextNode(cnamevalue);
optionElement.appendChild(cnameText);
cnameElement.appendChild(optionElement);

html;

          <select id="specname" name="specname">          <option value="">请选择...</option>          </select>             <select id="cname" name="cname">          <option value="">请选择...</option>          </select>   

ajax:

window.onload = function(){//加载页面后 获得专业列表var xhr=ajaxFunction();xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status==200){var data=xhr.responseText;var json=eval("("+data+")");for(var i=0;i<json.length;i++){ var specnamevalue=json[i].specname;  var optionElement = document.createElement("option"); optionElement.setAttribute("value",specnamevalue); var specnameText = document.createTextNode(specnamevalue); optionElement.appendChild(specnameText); var specnameElement = document.getElementById("specname");  specnameElement.appendChild(optionElement);  }}}}var specnaem=document.getElementById("specname").value; xhr.open("POST","./classServlet?mode=getspec",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(null);  document.getElementById("specname").onchange=function(){var xhr=ajaxFunction();var specname=document.getElementById("specname").value;xhr.open("POST","./classServlet?mode=getclass",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send("specname="+specname);xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status==200){var data=xhr.responseText;var json=eval("("+data+")");var cnameElement = document.getElementById("cname");var optionsOld = cnameElement.getElementsByTagName("option");for(var i=1;i<optionsOld.length;){//清除cnameElement.removeChild(optionsOld[i]);}for(var i=0;i<json.length;i++){ var cnamevalue=json[i].cname;  var optionElement = document.createElement("option"); optionElement.setAttribute("value",cnamevalue);  var cnameText = document.createTextNode(cnamevalue); optionElement.appendChild(cnameText); cnameElement.appendChild(optionElement);  }}}}}

servlet:

import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;import bpo.cl;import bpo.classbpo;import bpo.spec;/** * Servlet implementation class classServlet */@WebServlet("/classServlet")public class classServlet extends HttpServlet {private static final long serialVersionUID = 1L;           /**     * @see HttpServlet#HttpServlet()     */    public classServlet() {        super();        // TODO Auto-generated constructor stub    }/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setContentType("text/html;charset=UTF-8");   String mode=request.getParameter("mode");System.out.println(mode);classbpo cb=new classbpo();Gson gson = new Gson();String s = null;if(mode.equals("getspec")){List<spec> list=new ArrayList<spec>();try {list=cb.getspecname();s= gson.toJson(list);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}response.getWriter().println(s);}else{String specname = new String(request.getParameter("specname").getBytes("ISO-8859-1"), "utf-8");List<cl> list =new ArrayList<cl>();try {list=cb.getclassname(specname);s=gson.toJson(list);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}response.getWriter().println(s);}}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}