网站推广.NET

网站推广.NET

javascript操纵DropDownList控件具体用法实例详解

来源:互联网

用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的之间的传递

立即学习“Java免费学习笔记(深入)”;

<script language="javascript"> function hehe() { document.all(&#39;txtSdept&#39;).value =document.all(&#39;ddlSdept&#39;).options[document.all(&#39;ddlSdept&#39;).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>

1、js脚本如何访问服务器控件的值

界面上有一个TextBox控件,ID为Name,js里可以采用如下脚本取Name的值

var myvalue=document.all(&#39;Name&#39;).value;

2、服务器控件如何取js中变量的值
目前未发现比较好的办法,我通常采用的方法是在界面上放一个隐藏的控件HtmlInputHidden,然后设置为以服务器控件运行,这样在js脚本中和ASP.NET代码里都可以访问到该控件的值
js中给服务器控件赋值:

var bt=document.all(&#39;Name&#39;).value; bt.value=&#39;名称&#39;;

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==&#39;text&#39; || inputList.type==&#39;password&#39;)) { inputList.value=""; } }

4、让dropdownlist选择到指定项
选择dropdownlist中值为“我得选择”得项

var handl=document.all(&#39;List1&#39;); var my_value=&#39;我得选择&#39;; for(var index=0;index<handle.options.length;index++) { if(handle.options[index].text==my_value) { handle.selectedIndex=index; } }

JS取消ListBox,select,DropDownList选项的选中

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(&#39;,&#39;); var s = opt.length for(var j = 0;j<s;j++) { var newOption = document.createElement("OPTION");   //定义一个新的项 var ff = opt[j].split(&#39;|&#39;);    newOption.text = ff[1];    newOption.value = ff[1];    drp1.options.add(newOption);   } } } htp.send() }
dropdownlist