比如<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中变量的值 目前未发现比较好的办法，我通常采用的方法是在界面上放一个隐藏的控件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 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)三级联动无刷新 复制代码 代码如下: <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 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+"//"+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 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|企业|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>

　　推荐阅读

　　js监听表单value的修改同步问题，跨浏览器支持

想要实现的功能大概是这样的： 有两个文本框，其中一个只读，另一个可以输入。要求在可输入文本框中输入文本时，只读文本框能够获得输入的值，且只读文本框旁边出现提示信息，实时显示只读文本框的内容。 这个功能>>>详细阅读

本文标题：JavaScript与DropDownList 区别分析

地址：http://www.17bianji.com/kaifa2/JS/27337.html

 1/2    1