视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript操纵DropDownList控件具体用法实例详解
2020-11-27 20:15:19 责编:小采
文档


用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>

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选项的选中

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() 
}

下载本文
显示全文
专题