以前觉得动态的下拉框特麻烦;今天自己写了一个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").οnchange=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 stub
response.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 block
e.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 block
e.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 stub
doGet(request, response);
}
}