当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript与DropDownList 区别分析

Javascript
JavaScript 序列化对象实现代码
替代window.event.srcElement效果的可兼容性的函数
div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
IE和Firefox下event事件杂谈
javascript option onclick事件ie解决方案 兼容ie,firefox
javascript demo 基本技巧
用js实现层随着内容大小动态渐变改变 推荐
JS 的应用开发初探(mootools)
JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
JQuery Tips(4) 一些关于提高JQuery性能的Tips
jQuery 淡入淡出、展开收缩菜单实现代码
js控制div及网页相关属性的代码
javascript 翻页测试页(动态创建标签并自动翻页)
Js获取table当前tr行的值的代码
IE 上下滚动展示模仿Marquee机制
jQuery解决iframe高度自适应代码
jQuery 连续列表实现代码
利用jQuery的$.event.fix函数统一浏览器event事件处理
Javascript和Ajax中文乱码吐血版解决方案
js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE

No. « 251 252 253 254 »

技术文章搜索

关键字

Javascript 中的 JavaScript与DropDownList 区别分析

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 117 ::
收藏到网摘: n/a

大家都知道，.NET中一些Web服务器控件解析并编译，最终被渲染的时候，其实是转化成了普通的html控件。 比如<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>