大家都知道,.NET中一些Web服务器控件解析并编译,最终被渲染的时候,其实是转化成了普通的html控件。
比如控件就被渲染成了锚点控件,这里要讲的DropDownList控件也一样,被渲染成了普通的select控件,在如下的asp.net页面中定义了一个web服务器控件DropDownList和一个普通的select控件(主要为了对比)。
代码
复制代码 代码如下:
长沙
北京
天津
漠河
James
Green
Lily
Lucy
在浏览器中查看该页面,并点击查看源文件,不难看出,asp.net页面被渲染成了如下格式:
代码
复制代码 代码如下:
长沙
北京
天津
漠河
James
Green
Lily
Lucy
好了,接下来介绍一下要用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的之间的传递
复制代码 代码如下:
计算机系
机械系
电子系
英语系
中文系
参考文章:
复制代码 代码如下:
取消绑定
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.;
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)三级联动无刷新
复制代码 代码如下:
Html代码
复制代码 代码如下:
请选择所属国家
请选择所属省
请选择所属市
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;
}
您可能感兴趣的文章:
- JS简单操作select和dropdownlist实例
- JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
- JS获取DropDownList的value值与text值的示例代码
- js给dropdownlist添加选项的小例子
- 用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置
- 客户端用JavaScript填充DropDownList控件 服务器端读不到值
- asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- 利用js给DropdownList赋值实例