使用ajax給頁面的多個下拉框動態賦值
一。前臺頁面
$.post("${ctx}/basedata/baseData.do?method=queryPlantUnitList",function(data){
var optionvalue=eval("("+data+")");
$.each(optionvalue, function(key, val){
if(key=="YESORNOT")
{
var yonval=val;
$("#virtualflag option").remove();
$("#tlflag option").remove();
$("#agcflag option").remove();
$("#hotflag option").remove();
$("#virtualflag").append("<option value='-1'>請選擇</option>");
$("#tlflag").append("<option value='-1'>請選擇</option>");
$("#agcflag").append("<option value='-1'>請選擇</option>");
$("#hotflag").append("<option value='-1'>請選擇</option>");
$.each(yonval, function(key, val){
$("#virtualflag").append('<option value="' +val.id+ '">' + val.name + '</option>');
$("#tlflag").append('<option value="' +val.id+ '">' + val.name + '</option>');
$("#agcflag").append('<option value="' +val.id+ '">' + val.name + '</option>');
$("#hotflag").append('<option value="' +val.id+ '">' + val.name + '</option>');
});
}else if(key=="UNITSTATE"){
var stateval=val;
$("#state option").remove();
$("#state").append("<option value='-1'>請選擇</option>");
$.each(stateval, function(key, val){
$("#state").append('<option value="' +val.id+ '">' + val.name + '</option>');
});
}else if(key=="UNITAPPTYPE"){
var apptypeval=val;
$("#apptype option").remove();
$("#apptype").append("<option value='-1'>請選擇</option>");
$.each(apptypeval, function(key, val){
$("#apptype").append('<option value="' +val.id+ '">' + val.name + '</option>');
});
}else if(key=="UNITBASETYPE"){
var bastypeval=val;
$("#basetype option").remove();
$("#basetype").append("<option value='-1'>請選擇</option>");
$.each(bastypeval, function(key, val){
$("#basetype").append('<option value="' +val.id+ '">' + val.name + '</option>');
});
}else if(key=="UNITDISPTCHTYPE"){
var dispatchval=val;
$("#disptchtype option").remove();
$("#disptchtype").append("<option value='-1'>請選擇</option>");
$.each(dispatchval, function(key, val){
$("#disptchtype").append('<option value="' +val.id+ '">' + val.name + '</option>');
});
}else if(key=="POWERPLANT"){
var plantval=val;
$("#parentplantname option").remove();
$("#parentplantname").append("<option value='-1'>請選擇</option>");
$.each(plantval, function(key, val){
$("#parentplantname").append('<option value="' +val.id+ '">' + val.name + '</option>');
});
}else if(key=="PLANTUNIT"){
var unitval=val;
$("#planunit option").remove();
$("#planunit").append("<option value='-1'>請選擇</option>");
$.each(unitval, function(key, val){
$("#planunit").append('<option value="' +val.id+ '">' + val.name + '</option>');
});
}
});
二、html程式碼
<tr>
<td width="15%" height="28">
<div align="right"><font color="red">*</font> 基本型別：</div></td>
<td width="35%" height="28" bgcolor="ffffff" align="left">
<select id="basetype" name="basetype">
</select>
<input id="basetypevalue" type="hidden" value="" >
</td>
<td width="15%" height="28">
<div align="right"><font color="red">*</font> 機組應用型別：</div></td>
<td width="35%" height="28" bgcolor="ffffff" align="left">
<select id="apptype" name="apptype">
</select>
<input id="apptypevalue" type="hidden" value="" >
</td>
</tr>
<tr>
<td width="15%" height="28">
<div align="right"><font color="red">*</font> 排程型別：</div></td>
<td width="35%" height="28" bgcolor="ffffff" align="left">
<select id="disptchtype" name="disptchtype">
</select>
<input id="disptchtypevalue" type="hidden" value="" >
</td>
<td width="15%" height="28">
<div align="right"><font color="red">*</font> 狀態：</div></td>
<td width="35%" height="28" bgcolor="ffffff" align="left">
<select id="state" name="state">
</select>
<input id="statevalue" type="hidden" value="" >
</td>
</tr>
<tr>
<td width="15%" height="28">
<div align="right"> 額定容量：</div></td>
<td width="35%" height="28" bgcolor="ffffff" align="left" class="word" >
<input id="maxcapacity" name="maxcapacity" type="text"
value="" onkeypress="return event.keyCode>=48&&event.keyCode<=57||event.keyCode==46" class="w220" />(MW)</td>
<td width="15%" height="28">
<div align="right"> 機組最小技術出力：</div></td>
<td width="35%" height="28" bgcolor="ffffff" align="left">
<input id="mincapacity" name="mincapacity" onkeypress="return event.keyCode>=48&&event.keyCode<=57||event.keyCode==46" type="text"
value="" class="w220" />(MW)</td>
</tr>
三、後臺程式碼
public void queryPlantUnitList(HttpServletRequest request,
HttpServletResponse response, ModelMap modelMap) throws Exception {
StringBuffer json = new StringBuffer();
response.setContentType("text/html;charset=UTF-8");
Map<String, List<String[]>> plantunitListInfo = baseDataManager.getTypeList();
int count=plantunitListInfo.size();
json.append("{");
for (Map.Entry entry : plantunitListInfo.entrySet()) {
count--;
String key = entry.getKey().toString();
json.append("\""+key+"\"");
json.append(":");
json.append("[");
List<String[]> values = (List<String[]>) entry.getValue();
for(int i=0;i<values.size();i++)
{
json.append("{");
json.append("\"id\":");
String[] info=values.get(i);
json.append("\"" +info[0] + "\"").append(",").append("\"name\":").append("\""+info[1]+"\"");
json.append("}");
if (i < values.size() - 1) {
json.append(",");
}
}
json.append("]");
if (count>=1) {
json.append(",");
}
}
json.append("}");
response.getWriter().println(json.toString());
System.out.println(json.toString());
response.getWriter().flush();
}
四、查詢處理
getJdbcTemplate().query(sql1, new ResultSetExtractor() {
public Object extractData(ResultSet rs) throws SQLException,
DataAccessException {
ResultSetMetaData med = rs.getMetaData();
int intColn = med.getColumnCount();
while (rs.next()) {
String[] info = new String[intColn];
for (int j = 0; j < intColn; j++) {
info[j] = rs.getString(j + 1);
if (info[j] == null || info[j].trim().equals("null") || info[j].trim().equals("")) {
info[j] = "";
}
}
datalist.add(info);
}
return null;
}
});
Map<String,List<String[]>> returnMap = new HashMap<String,List<String[]>>();
if (datalist != null) {
for (String[] stra : datalist) {
List<String[]> list = returnMap.get(stra[0]);
if(list == null){
list = new ArrayList<String[]>();
returnMap.put(stra[0], list);
}
list.add(new String[]{stra[1],stra[2]});
}
}
return returnMap;