JavaScript与DropDownList 区别分析_Javascript教程-查字典教程网

摘要：比如控件就被渲染成了锚点控件，这里要讲的DropDownList控件也一样，被渲染成了普通的select控件，在如下的asp.net页面中定...

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

<option value = "0">James</option>

<option value = "1">Green</option>

</select>

在浏览器中查看该页面，并点击查看源文件，不难看出，asp.net页面被渲染成了如下格式：

代码

复制代码代码如下:

</select>

<option value="0">James</option>

<option value="1">Green</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的之间的传递

复制代码代码如下:

function hehe()

{

document.all('txtSdept').value =document.all('ddlSdept').options[document.all('ddlSdept').selectedIndex].text;

}

</script>

<asp:DropDownList id="ddlSdept" 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" runat="server"></asp:TextBox>

参考文章：

复制代码代码如下:

<title>无标题文档</title>

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];

}

</select>

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

$(document).ready(function(){

$("#cel").click(function(){

$("#<%=ListBox1.ClientID%>").get(0).selectedIndex=-1;

});

</script>

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)三级联动无刷新

复制代码代码如下:

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，具体代码如下：

程序代码

复制代码代码如下:

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;

}