JavaScript與DropDownList 區別分析

大家都知道，.NET中一些Web伺服器控制元件解析並編譯，最終被渲染的時候，其實是轉化成了普通的html控制元件。

比如控制元件就被渲染成了錨點控制元件，這裡要講的DropDownList控制元件也一樣， 被渲染成了普通的select控制元件，在如下的asp.net頁面中定義了一個web伺服器控制元件DropDownList和一個普通的select控制元件（主 要為了對比）。 

程式碼如下:

 
長沙 
北京 
天津 
漠河 
 
 
James 
Green 
Lily 
Lucy 
 
在瀏覽器中檢視該頁面，並點選檢視原始檔，不難看出，asp.net頁面被渲染成了如下格式： 
程式碼

 
長沙 
北京 
天津 
漠河 
 
 
James 
Green 
Lily 
Lucy 
 

好了，接下來介紹一下要用javascript操縱DropDownList控制元件，首先得了解select(或者DropDownList)的兩個最基本的屬性，一個是value屬性，一個是text屬性，還有一個selectedIndex

屬性，用來標識當前選中的項（數字），具體可參見上面的示例程式碼。 
下面正式言歸正傳，主要介紹如下幾點： 
（1） 清空DropDownList控制元件中的值。 
　　 
document.getElementById('ddlCities').options.length = 0; 
(2) 判斷DropDownList中是否有value為'Param1'的ListItem。 

function isListItemExist(objDdl , objItemValue) 
{ 
var isExist = false; 
for(var i in objSelect.options) 
　　{ 
　　　　if(i.value == objItemValue) 
　　　　{ 
　　　　　　isExist = true; 
　　　　　　break; 
　　　　} 
　　} 
　　return isExist; 
} 
JavaScript與DropDownList 
伺服器控制元件DropDownList和Javascript的之間的傳遞 

 
function hehe() 
{ 
document.all('txtSdept').value =document.all('ddlSdept').options[document.all('ddlSdept').selectedIndex].text; 
} 
 
 
計算機系 
機械系 
電子系 
英語系 
中文系 
 
 

參考文章：

 
 
 
function moveSelected(select, down) 
{ 
if (select.selectedIndex != -1) 
{ 
if (down) 
{ 
if (select.selectedIndex != select.options.length - 1) 
var i = select.selectedIndex + 1; 
else 
return; 
} 
else 
{ 
if (select.selectedIndex != 0) 
var i = select.selectedIndex - 1; 
else 
return; 
} 
var swapOption = new Object(); 
swapOption.text = select.options[select.selectedIndex].text; 
swapOption.value = select.options[select.selectedIndex].value; 
swapOption.selected = select.options[select.selectedIndex].selected; 
swapOption.defaultSelected = select.options[select.selectedIndex].defaultSelected; 
for (var property in swapOption) 
select.options[select.selectedIndex][property] = select.options[property]; 
for (var property in swapOption) 
select.options[property] = swapOption[property]; 
} 
} 
 
 
1 
2 
3 
4 
5 
6 
7 
 
 
 
 

1、js指令碼如何訪問伺服器控制元件的值 
介面上有一個TextBox控制元件，ID為Name，js裡可以採用如下指令碼取Name的值 
var myvalue=document.all('Name').value; 
2、伺服器控制元件如何取js中變數的值 
目前未發現比較好的辦法，我通常採用的方法是在介面上放一個隱藏的控制元件HtmlInputHidden，然後設定為以伺服器控制元件執行，這樣在js指令碼中和ASP.NET程式碼裡都可以訪問到該控制元件的值 
js中給伺服器控制元件賦值： 
var bt＝document.all('Name').value; 
bt.value='名稱'; 
ASP.NET中使用Name.Value來訪問。 
3、如何遍歷介面上所有TextBox元素 

var inputList = document.body.getElementsByTagName("INPUT"); 
for(var i=0;i{ 
if(inputList.disabled==false && (inputList.type=='text' || inputList.type=='password')) 
{ 
inputList.value=""; 
} 
} 

4、讓dropdownlist選擇到指定項 
選擇dropdownlist中值為“我得選擇”得項 

var handl=document.all('List1'); 
var my_value='我得選擇'; 
for(var index=0;index{ 
if(handle.options[index].text==my_value) 
{ 
handle.selectedIndex=index; 
} 
} 

 

JS取消ListBox,Select,DropDownList選項的選中 

 
 
 
 
 
 
 
 
$(document).ready(function(){ 
$("#cel").click(function(){ 
$("#").get(0).selectedIndex=-1; 
}); 
}); 
 

 

 

dropdownlist 選中值 
c#: 

ddlProvince.SelectedIndex = ddlProvince.Items.IndexOf(ddlProvince.Items.FindByText( "浙江"));
javascript.: 
var requiredSdept=$("select[@id='ddlSdept'] option[@selected]").val(); 
var requiredSdept = $("#ddlSdept option[@selected]").text(); 
var select1 = document.all.; 
var select1value = select1.options[select1.selectedIndex].value; 
var select1Text = select1.options[select1.selectedIndex].innerText; 
其中select1Text 為選中的值。如果在模態視窗中使用，可以用如下程式碼： 
window.returnValue=select1Text;//這是返回給父窗體的值 
window.close(); 

javascript中設定dropdownlist哪一項為當前選中項 
方法1: 
i = 2 
document.all.dropdownlistID.options[i].selected=true 
方法2: 
obj.selectedIndex = 2; 
方法3: 
obj.value="你要設的數值。"//Dropdownlist就會自動把那個值設為當前。 
javascript清除dropdownlist的項

//清除原有項 
function clearitem(){ 
var drp1 = document.getElementById("drp1"); 
while(drp1.options.length>0) 
{ 
drp1.options.remove(0); 
} 
} 

動態更改方法（根據城市程式碼取得該市商業區並新增到DropDownList中）

function getsyq() 
{ 
var city = document.getElementById("DropDownList_Cities").value;　　//取得城市程式碼 
var htp = new ActiveXObject("Msxml2.XMLHTTP"); 
var drp1 = document.getElementById("drp1");　 
var url = "?stat=1&city="+city　　 
htp.open("post",url,true) 
htp.onreadystatechange=function() 
{ 
if(htp.readyState==4) 
{ 
　　　clearitem(); //清除原有下拉項 
var str = htp.responseText; 
var pt = str.split(','); 
var s = opt.length 
for(var j = 0;j{ 
var newOption = document.createElement("OPTION"); 　　//定義一個新的項 
var ff = opt[j].split('|'); 
　　 newOption.text = ff[1]; 
　　 newOption.value = ff[1]; 
　　 drp1.options.add(newOption); 
　 } 
} 
} 
htp.send() 
} 

JavaScript實現DropDownList(Select)三級聯動無重新整理 

 
function CountryChange(){ 
countryid=document.getElementById("ddlContry").value; 
if(countryid==null||countryid==""){ 
alert("請選擇所屬國家"); 
CountryDel("ddlProvince");//清空DropDownList 
CountryDel("ddlCity");//清空DropDownList 
return false; 
} 
var countrystring=""; 
var posturl=location.protocol+"//"+location.hostname+"//soleweb//AjaxEnjine//AreaShow.aspx?AreaId="+countryid; 
countrystring=openUrl(posturl); 
if(countrystring=="-2"){//查詢失敗 
alert("資料查詢失敗"); 
return false; 
} 
//分割並寫入DropDownList 
CountryDel("ddlProvince");//清空DropDownList 
CountryDel("ddlCity");//清空DropDownList 
if(countrystring==""){ 
return false; 
} 
var stringarray=countrystring.split("|"); 
for(var i=0;i//拆分內部陣列 
var ptionarray=stringarray[i].split(","); 
var newoption=document.createElement("option"); 
newoption.text=optionarray[0]; 
newoption.value=optionarray[1]; 
document.getElementById("ddlProvince").options.add(newoption);　　 
} 
} 
function CountryDel(AreaName){//清空DropDownList 
var countnum=document.getElementById(AreaName).options.length; 
for(var i=1;idocument.getElementById(AreaName).remove(countnum-i); 
} 
} 
function ProvinceChange(){ 
countryid=document.getElementById("ddlProvince").value; 
if(countryid==null||countryid==""){ 
alert("請選擇所屬省"); 
CountryDel("ddlCity");//清空DropDownList 
return false; 
} 
var countrystring=""; 
var posturl=location.protocol+"//"+location.hostname+"//soleweb//AjaxEnjine//AreaShow.aspx?AreaId="+countryid; 
countrystring=openUrl(posturl); 
if(countrystring=="-2"){//查詢失敗 
alert("資料查詢失敗"); 
return false; 
} 
//分割並寫入DropDownList 
CountryDel("ddlCity");//清空DropDownList 
if(countrystring==""){ 
return false; 
} 
var stringarray=countrystring.split("|"); 
for(var i=0;i//拆分內部陣列 
var ptionarray=stringarray[i].split(","); 
var newoption=document.createElement("option"); 
newoption.text=optionarray[0]; 
newoption.value=optionarray[1]; 
document.getElementById("ddlCity").options.add(newoption);　　 
} 
} 
function openUrl(url) 
{ 
var bjxml=new ActiveXObject("Microsoft.XMLHttp") 
objxml.open("GET",url,false); 
objxml.send(); 
retInfo=objxml.responseText; 
if (objxml.status=="200") 
{ 
return retInfo; 
} 
else 
　 { 
return "-2"; 
} 
} 
 

Html程式碼 

 
請選擇所屬國家 
 
 
請選擇所屬省 
 
 
請選擇所屬市 
 

Aspx.cs程式碼 

protected void Page_Load(object sender, EventArgs e) 
{ 
SoLe.Common.StringFormat sft = new SoLe.Common.StringFormat(); 
string AreaId = sft.Html_Fn(Request.QueryString["AreaId"].ToString()); 
StringBuilder AreaString = new StringBuilder(); 
AreaString.Append(""); 
if (!Page.IsPostBack) 
{ 
//Response.Write(AreaIdValid(AreaId.ToString())); 
SoLe.BLL.AreaTable bll = new SoLe.BLL.AreaTable(); 
DataSet ds = new DataSet(); 
ds = bll.GetList(" PaterId=" + AreaId.ToString()+" "); 
if (!object.Equals(ds, null) && ds.Tables[0].Rows.Count > 0) { 
for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { 
if (string.IsNullOrEmpty(AreaString.ToString())) 
{ 
AreaString.Append(ds.Tables[0].Rows[i]["Title"].ToString() + "," + ds.Tables[0].Rows[i]["Id"].ToString()); 
} 
else { 
AreaString.Append("|" + ds.Tables[0].Rows[i]["Title"].ToString() + "," + ds.Tables[0].Rows[i]["Id"].ToString()); 
} 
} 
} 
} 
Response.Write(AreaString.ToString()); 
} 

JavaScript分割字串裝載到DropDownList 
假設變數str存放著幾組對應的資料，DropDownList名為ddlType，把字元分隔後的資料裝載到ddlType，具體程式碼如下： 
程式程式碼 

 
function LoadType() { 
var str = "1|網頁|2|圖片|3|企業|4|資訊|"; 
var temp = str.split("|"); 
var count = (temp.length - 1) / 2; 
for (var i = 0; i <= count; i++) { 
document.all("ddlType").options.add(new Option(temp[i], temp[i + 1])); 
} 
return; 
}