大家都知道，.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" nchange="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" nclick="moveSelected(this.form.selectName, false)" type="button" value="上移" />?
<input id="moveDown" nclick="moveSelected(this.form.selectName, false)" type="button" value="下移" />?
</form>?

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<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 為選中的值。如果在模態窗口中使用，可以用如下代碼：?
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<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)三級聯動無刷新?

<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+"//"+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<stringarray.length;i++){//重寫DropDownList?
//拆分內部數組?
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;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+"//"+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<stringarray.length;i++){//重寫DropDownList?
//拆分內部數組?
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";?
}?
}?
</script>?

Html代碼?

<asp:DropDownList ID="ddlContry" runat="server" nchange="CountryChange()" nSelectedIndexChanged="ddlContry_SelectedIndexChanged">?
<asp:ListItem Value=" ">請選擇所屬國家</asp:ListItem>?
</asp:DropDownList>?
<asp:DropDownList ID="ddlProvince" runat="server" nchange="ProvinceChange()" nSelectedIndexChanged="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|企業|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>

[轉自]：http://space.itpub.net/12639172/viewspace-628712s

轉載于:https://www.cnblogs.com/cherry0917/archive/2011/07/26/2116883.html

總結

以上是生活随笔為你收集整理的javascript,jquery 操作 dropdownlist ,select的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。