JavaScript与DropDownList 区别分析


Posted in Javascript onJanuary 01, 2010

比如<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>
Javascript 相关文章推荐
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
HTML node相关的一些资料整理
Jan 01 #Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 #Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 #Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 #Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 #Javascript
url 特殊字符 传递参数解决方法
Jan 01 #Javascript
JavaScript 数组循环引起的思考
Jan 01 #Javascript
You might like
PHP Pear 安装及使用
2009/03/19 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
document.open() 与 document.write()的区别
2007/08/13 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
Vue的Options用法说明
2020/08/14 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python实现二分法算法实例
2015/02/02 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
python 中xpath爬虫实例详解
2019/08/26 Python
对python中list的五种查找方法说明
2020/07/13 Python
python SOCKET编程基础入门
2021/02/27 Python
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
销售人员个人求职信
2013/09/26 职场文书
数控机床专业自荐信
2014/05/19 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
红旗渠导游词
2015/02/09 职场文书
罚款通知怎么写
2015/04/22 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python