1. 前臺(tái)jsp，新建一個(gè)下拉控件
select id="seldvd" onChange="sel_onchange(this)">/select>
2. js部分，建一個(gè)function方法，利用ajax，指向 'getAllTypes.action' 的servlet部分，獲取傳來(lái)的下拉列表的數(shù)據(jù)，動(dòng)態(tài)填充
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;idata.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;">數(shù)據(jù)庫(kù)中用id和type保存的數(shù)據(jù)/span>/span>
span style="white-space:pre"> /span> span style="white-space:pre"> /span>$item.html(data[i].type); //添加option數(shù)據(jù)
span style="white-space:pre"> /span> span style="white-space:pre"> /span>$sel.append($item); //將option添加進(jìn)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. 新建一個(gè)servlet頁(yè)面，用來(lái)向Ajax返回?cái)?shù)據(jù)
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
ArrayListtypeInfo> typeList = new ArrayListtypeInfo>();
typeDao td = new typeDao();
typeList = td.getAllTypes();
JSONArray arr = new JSONArray(typeList);//這里導(dǎo)入需要轉(zhuǎn)json數(shù)據(jù)包
String jsString = arr.toString();
//響應(yīng)到客戶(hù)端
request.setCharacterEncoding("utf-8");
response.setContentType("text/plain;charset=utf-8");
response.getWriter().print(jsString); //返回下拉列表需要的json格式數(shù)據(jù)
}
4. 那么問(wèn)題來(lái)了，這個(gè)數(shù)據(jù)來(lái)源在哪??？當(dāng)然在數(shù)據(jù)庫(kù)（MySQL）。所以先要寫(xiě)一個(gè)方法讀取數(shù)據(jù)庫(kù)中的數(shù)據(jù)
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;
}
}
TypeDao.java (需要導(dǎo)入JDBC包)
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import model.typeInfo;
public class typeDao extends baseDao {
public ArrayListtypeInfo> getAllTypes(){
ArrayListtypeInfo> typeList = new ArrayListtypeInfo>();
Connection con = null;
PreparedStatement psm = null;
ResultSet rs = null;
try {
con = super.getConnection();
psm = con.prepareStatement("select * from types");
rs = psm.executeQuery();
while(rs.next()){
typeInfo types = new typeInfo();
types.setId(rs.getInt(1));
types.setType(rs.getString(2));
typeList.add(types);
}
} catch (Exception e) {
System.out.println("顯示所有類(lèi)型報(bào)錯(cuò)："+e.getMessage());
}finally{
super.closeAll(rs, psm, con);
}
return typeList;
//
}
}
4. 好了，利用Tomcat ，現(xiàn)在打開(kāi)網(wǎng)頁(yè)，下拉列表就能顯示數(shù)據(jù)了
以上所述是小編給大家介紹的Ajax動(dòng)態(tài)為下拉列表添加數(shù)據(jù)的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- ajax實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果示例
- 利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟
