管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JavaScript与DropDownList 区别分析

　　比如<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>

教程首页 更多教程