javascript動態(tài)控制服務(wù)器控件實(shí)例
最近多個頁面需要加載一些下拉列表框，供用戶選擇，原來都是在服務(wù)器端進(jìn)行加載應(yīng)運(yùn)用。最后由于業(yè)務(wù)邏輯方面的考慮，需要將DropDownList的部分功能放到客戶端實(shí)現(xiàn)?，F(xiàn)在下拉列表的功能使用起來感覺比全部放到服務(wù)器端性能好多了。
具體方法：
在頁面中放入一個DropDownList控件，并添加一項(xiàng)，用來分析其產(chǎn)生的HTML代碼，這樣在使用js進(jìn)行動態(tài)控制時，將會非常清晰其測試代碼如下所示：
<asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem>1</asp:ListItem> </asp:DropDownList>
在瀏覽器中查看，并對Html進(jìn)行分析：以下是DropDownList控件生成的HTML代碼。和普通的select沒
有區(qū)別。那么也就可以通過js來動態(tài)填充、刪除、選擇等控制。
<select name="DropDownList1" id="DropDownList1"> <option value="1">1</option> </select>
可以將<asp:ListItem>1</asp:ListItem>刪除，現(xiàn)在添加兩個HTML button控件，分別用來實(shí)現(xiàn)添加選項(xiàng)，和刪除所有選項(xiàng)。Button源碼如下：
<input id="Button1" type="button" value="添加Option" onclick="addOption()" /> <input id="Button2" type="button" value="全部刪除Option" onclick="delOption()" />
添加和刪除函數(shù)如下所示：
function addOption(){
var ddlObj = document.getElementById("DropDownList1");//獲取對象
if(ddlObj.length>0)
delOption();//先刪除所有的，之后在添加
var optText = new Array("founder","china","beijing");
var optValue = new Array("0","1","2");
var oOption = null;
for(var i=0;i<optText.length;i++){
oOption = new Option(optText[i],optValue[i]);
ddlObj.options.add(oOption);
}
}
function delOption(){
var ddlObj = document.getElementById("DropDownList1");//獲取對象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE兩種均支持
}
}
在瀏覽器中查看，可以輕松地創(chuàng)建選擇下拉選項(xiàng)，由于這些是客戶端生成，因此其效率上要高于服務(wù)器
端工作的代碼。但是這個時候如果要使用DropDownList1.SelectedValue獲取用戶選擇的選項(xiàng)，那么你會得
到一個錯誤。這是由于DropDownList是由JS動態(tài)添加的，因此，它的項(xiàng)不屬于ViewState，并且不被維護(hù)，
也就是說我們無法在服務(wù)器端對其進(jìn)行處理。為了解決這一問題，可以使用兩種方式：1、Hidden控件保存
用戶選項(xiàng)方式；2、Request.Form方式。(參見msdn品味Ajax)
1、我們在頁面中添加一個Hidden控件，用它來保存DropDownList選項(xiàng)變化的信息，這樣在用戶選擇感
興趣的信息之后，我們就可以在服務(wù)器端獲取信息，并進(jìn)行處理，合理地實(shí)現(xiàn)客、服之間的分工。
對DropDownList控件添加一個onchange事件，此時它的html代碼如下所示：
<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()"> </asp:DropDownList>
Onchange事件如下所示，該事件主要保存用戶選定的value：
function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}
在此之后，我們使用一個asp:button控件來測驗(yàn)結(jié)果：
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}
到此，已經(jīng)完成了所有的工作，但是還有一個問題，DropDownList的change事件只有在用戶改變下拉選
項(xiàng)時才會觸發(fā)。因此，用戶使用默認(rèn)選項(xiàng)進(jìn)行提交時，則獲取空值。因此我們可以在填充option時，即對
hidden初始化。對addOption事件添加一行代碼如下：
function addOption(){
var ddlObj = document.getElementById("DropDownList1");//獲取對象
if(ddlObj.length>0)
delOption();//先刪除所有的，之后在添加
var optText = new Array("founder","china","beijing");
var optValue = new Array("0","1","2");
var oOption = null;
for(var i=0;i<optText.length;i++){
oOption = new Option(optText[i],optValue[i]);
ddlObj.options.add(oOption);
}
document.getElementById("HiddenField1").value = optValue[0];
}
不過以上紅色部分在TT瀏覽器下ADD不成功，其他瀏覽還沒試過，以下是另一個種寫法：
function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);
var DeptList=Guest_UserRegister.GetDeptList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option");
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}
}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option");
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}
- javascript 星級評分效果(手寫)
- javascript 密碼強(qiáng)度驗(yàn)證規(guī)則、打分、驗(yàn)證（給出前端代碼，后端代碼可根據(jù)強(qiáng)度規(guī)則翻譯）
- javascript+css好多網(wǎng)站用的選星星實(shí)現(xiàn)打分功能的函數(shù)
- 9個JavaScript評級/投票插件
- javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件實(shí)例
- JavaScript實(shí)現(xiàn)的日期控件具體代碼
- javascript實(shí)現(xiàn)日歷控件(年月日關(guān)閉按鈕)
- javascript模擬評分控件實(shí)現(xiàn)方法
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)花樣輪播效果，一種是帶按鈕的輪播，一種是自動輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
js對字符串和數(shù)字進(jìn)行加法運(yùn)算的一些情況
這篇文章主要介紹了js對字符串和數(shù)字進(jìn)行加法運(yùn)算的一些情況,需要的朋友可以參考下2023-02-02
echarts實(shí)現(xiàn)中國地圖下鉆進(jìn)入下一級(地圖鉆取)
最近在學(xué)習(xí)echarts,今天就來介紹一下echarts實(shí)現(xiàn)中國地圖下鉆進(jìn)入下一級,具有一定的參考價值,感興趣的可以了解一下2023-08-08
雖然現(xiàn)在不聯(lián)網(wǎng)的情況很少，但在本機(jī)上搭建一份Bootstrap離線文檔以備不時之需也是很有必要的。下面就給大家分享下搭建Bootstrap離線文檔的方法，感興趣的朋友一起看看吧2016-12-12
JavaScript實(shí)現(xiàn)iframe自動高度調(diào)整和不同主域名跨域
