1. 程式人生 > >select下拉框,選擇其中一個,然後進行查詢,完成之後,頁面上的select框不回顯當前查詢時選中的值

select下拉框,選擇其中一個,然後進行查詢,完成之後,頁面上的select框不回顯當前查詢時選中的值

開發十年,就只剩下這套架構體系了! >>>   

1.首先在jsp頁面select語句下面增加一個隱藏的input

 <select id="demo" name="demo" onchange="entryChange();">
	<option value="">--請選擇--</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
 </select>

<input id="entryId" name="entryId" type="hidden" value="此處寫你從後臺接收到的值">

2.然後對input框中的值進行賦值,傳給後臺程式碼

function entryChange(){
   var entryId= document.getElementById("demo").value;
   $('#entryId').val(entryId);
}

3.賦值之後在後臺定義,然後給他set/get方法,以便在jsp程式碼中進行接收

private String entryId;

public String getEntryId() {
	return entryId;
}

public void setEntryId(String entryId) {
	this.entryId = entryId;
}
	

4.從後臺會通過xml還是別的方式跳轉到jsp頁面,在頁面初始化方法中對傳進來的值進行處理

var entryId = $("#entryId").val();

//這裡根據你自己的需求來進行處理,因為我這裡的資料是用ajax獲取到的值拼接而成的
$.ajax({  
    contentType:"application/x-www-form-urlencoded;charset=UTF-8",   
    type:"POST",  
    url:"xxxx/xxxxxxxx.action?deptId="+deptId + "&" + Math.random(),  
    dataType:"json",
    success:function(res){
        var ststistic = "<option value=''>"+ "--請選擇--" +"</option>";
	    for(var i=0;i<res.length;i++){
	       res[i].statisticId;
	       res[i].statisticName;
	       if(entryId == res[i].statisticId){
	           ststistic=ststistic+"<option selected='selected'   value='"+res[i].statisticId+"'>"+res[i].statisticName+"</option>";
	       }else{
	           ststistic=ststistic+"<option value='"+res[i].statisticId+"'>"+res[i].statisticName+"</option>";
	       }
             }
       $("#informationTypeIdEntry").html(ststistic);
   }
}); 

對迴圈出來的值進行判斷,如果從後臺傳進來的entryId與迴圈出來的某個值相同,則在<option>中拼接上 selected='selected'屬性。

 

5.還有一種情況就是下拉框的資料顯示在頁面上是ztree的形式,這種形式使用的不是select標籤,而是input標籤,那麼我們這裡就還可以使用另外一種回顯方法(上面的都一樣,只不過從後臺返回值的時候做的回顯操作不一樣):

//ztree形式的input框
<input id="citySel" name="citySel" readonly type="text" onclick="showMenu(this); return false;"/>

var entryId= $("#entryId").val();

if (citySelName.length > 0) {
    $("#citySel").val(citySelName).trigger("change");
} else {
    $("#citySel").val(null).trigger("change");//id為空的話 select框就是空
}

也可以起到回顯的