Ajax动态为下拉列表添加数据的实现方法

 1. 前台jsp，新建一个下拉控件

<select id="seldvd" onChange="sel_onchange(this)"></select> 

2. js部分，建一个function方法，利用ajax，指向 'getAllTypes.action' 的servlet部分，获取传来的下拉列表的数据，动态填充

<span style="white-space:pre"> </span>function loadType(){ 
<span style="white-space:pre">   </span>$.get( 
 <span style="white-space:pre">  </span>    'getAllTypes.action', 
<span style="white-space:pre">   </span>  function(data){ 
<span style="white-space:pre">   </span>   var $sel = $("#seldvd"); 
<span style="white-space:pre">     </span> // console.log(data); 
<span style="white-space:pre">   </span>   for(var i = 0;i<data.length;i++){ 
<span style="white-space:pre">     </span> <span style="white-space:pre">  </span>$item = $("<option></option>"); //添加option 
<span style="white-space:pre">     </span> <span style="white-space:pre">  </span>$item.val(data[i].id); //添加option的value ，<span style="line-height: 1.5; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif;"><span style="font-size:10px;">数据库中用id和type保存的数据</span></span> 
<span style="white-space:pre">     </span> <span style="white-space:pre">  </span>$item.html(data[i].type); //添加option数据 
<span style="white-space:pre">     </span> <span style="white-space:pre">  </span>$sel.append($item); //将option添加进select 
 <span style="white-space:pre">  </span>     } 
 <span style="white-space:pre">  </span>    },'json' 
 <span style="white-space:pre">  </span>   ); 
<span style="white-space:pre"> </span>} 

3. 新建一个servlet页面，用来向Ajax返回数据

public void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    request.setCharacterEncoding("utf-8"); 
    ArrayList<typeInfo> typeList = new ArrayList<typeInfo>(); 
    typeDao td = new typeDao(); 
    typeList = td.getAllTypes(); 
    JSONArray arr = new JSONArray(typeList);//这里导入需要转json数据包 
    String jsString = arr.toString(); 
    //响应到客户端     
    request.setCharacterEncoding("utf-8"); 
    response.setContentType("text/plain;charset=utf-8"); 
    response.getWriter().print(jsString); //返回下拉列表需要的json格式数据 
  } 

4. 那么问题来了，这个数据来源在哪啊？当然在数据库（MySQL）。所以先要写一个方法读取数据库中的数据

<strong>typeInfo.java</strong> 

import java.io.Serializable; 
public class typeInfo implements Serializable { 
  private int id; 
  private String type; 
  public int getId() { 
    return id; 
  } 
  public void setId(int id) { 
    this.id = id; 
  } 
  public String getType() { 
    return type; 
  } 
  public void setType(String type) { 
    this.type = type; 
  } 
  public typeInfo(){ 
  } 
  public typeInfo(int id, String type) { 
    this.id = id; 
    this.type = type; 
  } 
} 								 
 1/2    1 2 下一页 尾页