ajax两级联动下拉框（js）

最新推荐文章于 2018-03-24 16:50:10 发布

原创最新推荐文章于 2018-03-24 16:50:10 发布 · 689 阅读

2 ·

CC 4.0 BY-SA版权

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态创建下拉选择框的方法，并通过AJAX请求从服务器获取选项数据，实现专业名称和班级名称的联动加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前觉得动态的下拉框特麻烦；今天自己写了一个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 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);
	}

}