jsp從資料庫擷取資料填充下拉框實現二級聯動菜單的方法_JSP編程

本文執行個體講述了jsp從資料庫擷取資料填充下拉框實現二級聯動菜單的方法。分享給大家供大家參考，具體如下：

項目告一段落，現在將遇到的比較實用的東西記錄下來，寫了多遍了，謹記於此，以備查看！

1、首先在資料庫中擷取第一個下拉框的資料：

<s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="width:90" list="tsfrom1" name="tsFrom" theme="simple" headerKey="" onchange="getTsFromDescribe(this);" headerValue="--請選擇--" />

幕後處理：

@Autowired private CustomMaManager custommamanager;//註解相當的好用啊，代碼都省了一大截 tsfrom1 = custommamanager.getTsFrom(); 

Service：

//得到投訴來源 public List<CustomManage> getTsFrom(){   return custommanagedao.getTsFrom(); }

dao:

/**得到產品類型**/ public List<CustomManage> getTsFrom(){   return this.find("SELECT distinct new CustomManage(tsFrom,'2') FROM CustomManage C WHERE C.tsFrom IS NOT NULL ORDER BY tsFrom ASC");}

注意：Oracle在java代碼裡取出重複值與SqlServer不一樣，它得使用：

複製代碼 代碼如下:

SELECT distinct new CustomManage(tsFrom,'2') FROM CustomManage C WHERE C.tsFrom IS NOT NULL ORDER BY tsFrom ASC

先new實體bean（CustomManage） 然後在實體bean中給相應欄位設定構造方法,不然將會出現後台已經返回了值，但是在前台下拉框中不顯示，下拉框空白的現象。

public CustomManage(String khname,int s){   this.khname=khname; } public CustomManage(String cpname,String type){   if("1".equals(type)){    this.cpname=cpname;   }else if("2".equals(type)){    this.tsFrom=cpname;   }else if("3".equals(type)){    this.khname=cpname;   } }

這裡需要在bean的實體類裡面加入相應的構造方法，以此來供去重使用。

至此第一級的資料準備已經差不多了。使用S標籤的list集合來擷取後台傳遞過來的值。

2、第二級下拉式功能表的級聯====利用Ajax來擷取資料

在第一級列表的onchange事件中編寫：

//投訴資訊來源資訊級聯 function getTsFromDescribe(ts_describe){  var tsfrom = $("#t_tsfrom").val();  var tstsFrom = $("#ts_tsFrom").val();  Ext.Ajax.request( {   url : '${ctx}/complaints/complaints!getTsFrom.action',   params : {    tsfrom : tsfrom//通過json形式將前台每次擷取到的值傳遞給後台   },   success : function(response) {    var json = Ext.util.JSON.decode(response.responseText);    if (json.success) {     var data = json.<strong>cmList</strong>;     if ("" == data) {      alert("請選擇投訴類型");      inputForm.t_tsfrom.focus();      $("#ts_tsFrom").empty();//每次需要將上一次的資料進行清空     } else {      $("#ts_tsFrom").empty();      //對擷取到的資料進行迭代     for ( var i = 0; i < data.length; i++) {      var id = data[i];      var name = data[i];      $("#ts_tsFrom").append(        "<option value='" + id + "'>" + name + "</option>");     }     dwr.util.removeAllOptions('tstsFrom');     dwr.util.addOptions('tstsFrom', data);  } } } }); }

後台返回資料：

public void getTsFrom() throws Exception {   HttpServletResponse response = ServletActionContext.getResponse();   String ts_names = tsfrom;   List<CustomManage> list = complaintsmanager.getTsDescribe(ts_names);   response.setContentType("text/javascript"); // 後台控制的代碼   PrintWriter writer = response.getWriter();   // 將得到的list集合轉為JSON對象傳給前台處理   JSONArray j = JSONArray.fromObject(list);   writer.println("{'success':true,'<strong>cmList</strong>':" + j.toString() + "}"); }

到此一個從資料庫裡動態擷取值，並且實現二級菜單級聯的功能就做的差不多了。發表出來希望對你對我都有好處哈。

這裡加註一點就是在修改的時候下拉框的值不會儲存，就是上一次點擊提交的時候儲存在資料庫裡的值無法填充到下拉框。

處理辦法：

var op1 = document.getElementById("op1").value; if(op1!=null){   $("#cp_validity").val(op1); //將取出來的值塞到下拉框中。一個蘿蔔一個坑 } <input type="hidden" id="op1" value="${compDisposal.validity}">//使用運算式將存在資料庫裡的值取出來，放在隱藏欄位裡面 

希望本文所述對大家jsp程式設計有所協助。