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 相关文章推荐
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
webpack dll打包重复问题优化的解决
Oct 10 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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用户指南-cookies部分
2006/10/09 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
对Django外键关系的描述
2019/07/26 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
生物学学生自我评价
2014/01/17 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
秸秆管理实施方案
2014/03/15 职场文书
学术会议主持词
2014/03/17 职场文书
平安建设实施方案
2014/03/19 职场文书
食品安全承诺书
2014/05/22 职场文书
奶茶店创业计划书
2014/08/14 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang