JavaScript與DropDownList 區(qū)別分析

更新時間：2010年01月01日 23:32:21 作者：

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

比如<asp:LinkButton>控件就被渲染成了<a>錨點控件，這里要講的DropDownList控件也一樣，被渲染成了普通的select控件，在如下的asp.net頁面中定義了一個web服務器控件DropDownList和一個普通的select控件（主要為了對比）。
代碼

復制代碼代碼如下:

 
<asp:DropDownList ID = "ddlCities" runat = "server"> 
<asp:ListItem Value = "0">長沙</asp:ListItem> 
<asp:ListItem Value = "1">北京</asp:ListItem> 
<asp:ListItem Value = "2">天津</asp:ListItem> 
<asp:ListItem Value = "3">漠河</asp:ListItem> 
</asp:DropDownList> 
<select id = "ddlNames" runat ="server"> 
<option value = "0">James</option> 
<option value = "1">Green</option> 
<option value = "2">Lily</option> 
<option value = "3">Lucy</option> 
</select> 

　　在瀏覽器中查看該頁面，并點擊查看源文件，不難看出，asp.net頁面被渲染成了如下格式：
代碼

復制代碼代碼如下:

 
<select name="ddlCities" id="ddlCitys"> 
<option value="0">長沙</option> 
<option value="1">北京</option> 
<option value="2">天津</option> 
<option value="3">漠河</option> 
</select> 
<select name="ddlNames" id="ddlNames"> 
<option value="0">James</option> 
<option value="1">Green</option> 
<option value="2">Lily</option> 
<option value="3">Lucy</option> 
</select> 

　　好了，接下來介紹一下要用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的之間的傳遞

復制代碼代碼如下:

 
<script language="javascript"> 
function hehe() 
{ 
document.all('txtSdept').value =document.all('ddlSdept').options[document.all('ddlSdept').selectedIndex].text; 
} 
</script> 
<asp:DropDownList id="ddlSdept" style="Z-INDEX: 101; LEFT: 240px; POSITION: absolute; TOP: 112px" onchange="hehe()" runat="server"> 
<asp:ListItem Value="1">計算機系</asp:ListItem> 
<asp:ListItem Value="2">機械系</asp:ListItem> 
<asp:ListItem Value="3">電子系</asp:ListItem> 
<asp:ListItem Value="4">英語系</asp:ListItem> 
<asp:ListItem Value="5">中文系</asp:ListItem> 
</asp:DropDownList> 
<asp:TextBox id="txtSdept" style="Z-INDEX: 102; LEFT: 48px; POSITION: absolute; TOP: 112px" runat="server"></asp:TextBox> 

參考文章：

復制代碼代碼如下:

 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>無標題文檔</title> 
<script language="javascript"> 
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]; 
} 
} 
<form id="formName" name="formName" > 
<select name="selectName" id="selectName" size="8"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
<option>7</option> 
</select> 
<input id="moveUp" onclick="moveSelected(this.form.selectName, false)" type="button" value="上移" /> 
<input id="moveDown" onclick="moveSelected(this.form.selectName, false)" type="button" value="下移" /> 
</form> 

1、js腳本如何訪問服務器控件的值
界面上有一個TextBox控件，ID為Name，js里可以采用如下腳本取Name的值
var myvalue=document.all('Name').value;
2、服務器控件如何取js中變量的值
目前未發(fā)現比較好的辦法，我通常采用的方法是在界面上放一個隱藏的控件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<inputList.length;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<handle.options.length;index++) 
{ 
if(handle.options[index].text==my_value) 
{ 
handle.selectedIndex=index; 
} 
} 

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

復制代碼代碼如下:

 
<asp:ListBox ID="ListBox1" runat="server"> 
<asp:ListItem Text="1" Value="1"></asp:ListItem> 
<asp:ListItem Text="2" Value="2"></asp:ListItem> 
<asp:ListItem Text="3" Value="3"></asp:ListItem> 
<asp:ListItem Text="4" Value="4"></asp:ListItem> 
<asp:ListItem Text="5" Value="5"></asp:ListItem> 
</asp:ListBox> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("#cel").click(function(){ 
$("#<%=ListBox1.ClientID%>").get(0).selectedIndex=-1; 
}); 
}); 
</script> 
<div id="cel" style="cursor:pointer;">取消綁定</div> 

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.<%= ddlSdept.ClientID %>; 
var select1value = select1.options[select1.selectedIndex].value; 
var select1Text = select1.options[select1.selectedIndex].innerText; 
其中select1Text 為選中的值。如果在模態(tài)窗口中使用，可以用如下代碼： 
window.returnValue=select1Text;//這是返回給父窗體的值 
window.close(); 

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

復制代碼代碼如下:

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

動態(tài)更改方法（根據城市代碼取得該市商業(yè)區(qū)并添加到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 opt = str.split(','); 
var s = opt.length 
for(var j = 0;j<s;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)三級聯(lián)動無刷新

復制代碼代碼如下:

 
<script language=javascript> 
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+"http://"+location.hostname+"http://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<stringarray.length;i++){//重寫DropDownList 
//拆分內部數組 
var optionarray=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;i<countnum;i++){//清空DropDownList 
document.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+"http://"+location.hostname+"http://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<stringarray.length;i++){//重寫DropDownList 
//拆分內部數組 
var optionarray=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 objxml=new ActiveXObject("Microsoft.XMLHttp") 
objxml.open("GET",url,false); 
objxml.send(); 
retInfo=objxml.responseText; 
if (objxml.status=="200") 
{ 
return retInfo; 
} 
else 
　 { 
return "-2"; 
} 
} 
</script> 

Html代碼

復制代碼代碼如下:

 
<asp:DropDownList ID="ddlContry" runat="server" onchange="CountryChange()" OnSelectedIndexChanged="ddlContry_SelectedIndexChanged"> 
<asp:ListItem Value=" ">請選擇所屬國家</asp:ListItem> 
</asp:DropDownList> 
<asp:DropDownList ID="ddlProvince" runat="server" onchange="ProvinceChange()" OnSelectedIndexChanged="ddlProvince_SelectedIndexChanged"> 
<asp:ListItem Value=" ">請選擇所屬省</asp:ListItem> 
</asp:DropDownList> 
<asp:DropDownList ID="ddlCity" runat="server"> 
<asp:ListItem Value=" ">請選擇所屬市</asp:ListItem> 
</asp:DropDownList> 

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，具體代碼如下：
程序代碼

復制代碼代碼如下:

 
<script language="javascript"> 
function LoadType() { 
var str = "1|網頁|2|圖片|3|企業(yè)|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; 
} 
<script> 

您可能感興趣的文章:

微信小程序開發(fā)技巧匯總
這篇文章主要介紹了微信小程序開發(fā)技巧匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07
JavaScript實現瀑布動畫
這篇文章主要為大家詳細介紹了JavaScript實現瀑布動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
javascript實現自定義滾動條效果
這篇文章主要為大家詳細介紹了javascript實現自定義滾動條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
JavaScript DOM事件(筆記)
這篇文章主要介紹了JavaScript DOM事件(筆記) ,需要的朋友可以參考下
2015-04-04
微信小程序module.exports模塊化操作實例淺析
這篇文章主要介紹了微信小程序module.exports模塊化操作,結合實例形式簡單分析了module.exports模塊化的定義與引用相關操作技巧與注意事項,需要的朋友可以參考下
2018-12-12
淺析TypeScript 命名空間
命名空間一個最明確的目的就是解決重名問題。這篇文章主要介紹了TypeScript 命名空間的相關知識，本文通過實例詳解給大家介紹的非常詳細,需要的朋友可以參考下
2020-03-03
JS防抖和節(jié)流實例解析
這篇文章主要介紹了JS防抖和節(jié)流實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
關于Function中的bind()示例詳解
其實所謂bind顧名思義就是綁定。bind()方法會創(chuàng)建一個新函數，當這個新函數被調用時，它的this值是傳遞給bind()的第一個參數，它的參數是bind()的其他參數和其原本的參數。這么說可能很多人都糊涂了，下面通過這篇文章的示例來給大家詳細的介紹下吧。
2016-12-12
Google Map V3 綁定氣泡窗口(infowindow)Dom事件實現代碼
無法在infowindow里面添加的div進行綁定事件處理，官方的API，發(fā)現了google.maps.InfoWindow下面的Events里面有個domready事件
2013-04-04
JavaScript中Object.prototype.toString方法的原理
這篇文章主要介紹了JavaScript中Object.prototype.toString方法的原理的相關資料,需要的朋友可以參考下
2016-02-02