javascript,jquery 操作 dropdownlist ,select
大家都知道,.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" nchange="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" nclick="moveSelected(this.form.selectName, false)" type="button" value="上移" />
<input id="moveDown" nclick="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 pt = 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 ptionarray=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 ptionarray=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 bjxml=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" nchange="CountryChange()" nSelectedIndexChanged="ddlContry_SelectedIndexChanged">
<asp:ListItem Value=" ">请选择所属国家</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlProvince" runat="server" nchange="ProvinceChange()" nSelectedIndexChanged="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>
[转自]:http://space.itpub.net/12639172/viewspace-628712s
转载于:https://www.cnblogs.com/cherry0917/archive/2011/07/26/2116883.html
javascript,jquery 操作 dropdownlist ,select相关推荐
- javascript / jquery 操作 cookie
什么是Cookie? 谓Cookie,是网页 通过浏览器保 存在用户本地计算机 上的一小段数据 .用户再次访问该网页的时候,浏览器会将这一小段数据发送给该网页.Cookie是网景公司的前雇员Lou M ...
- ajax实现多选 radio true,jQuery操作radio、checkbox、select的方法总结
jQuery操作radio.checkbox.select的方法总结 发布于 2015-05-21 06:55:26 | 253 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javas ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- jquery操作select时怎么产生事件
jquery操作select时怎么产生事件 jquery操作select时怎么产生事件, 如我设置2为选中项 $('#select').val("2"); 哪么怎么同时产生一个on ...
- jQuery操作Select
jQuery是如何控制和操作select的.先看下面的html代码 <select id="test"><option value="1"&g ...
- jquery操作select(增加,删除,清空)
jQuery获取Select选择的Text和Value: 引用https://www.cnblogs.com/Luouy/p/5806833.html $("#select_id" ...
- Jquery操作select小结
每次操作select都要查资料,干脆总结一下. 为select设置placeholder <select class="form-control selOP" placeho ...
- jquery 操作服务端控件,select 控件
<asp:DropDownList ID="ddl" runat="server"></asp:DropDownList> <se ...
- jQuery: 操作select option方法集合
每一次操作select的时候,总是要谷歌一下资料,真是太不爽了, 在这里记录一下. 公共select代码 <select id="sel"><option val ...
最新文章
- Kubernetes学习笔记一:Docker和Kubernetes的诞生
- Canal安装说明(Windows版)
- 常见MOS管型号及参数对照表
- 《MySQL——增删改查以及常用语法》
- javaweb c3p0连接oracle12c
- oracle tns和sid,oracle – TNS-12505:TNS:侦听器当前不知道连接描述符中给出的SID
- Scala学习笔记05:函数
- L3-006 迎风一刀斩 (30 分)-PAT 团体程序设计天梯赛 GPLT
- 开发者必备英文网站合集
- JSP+JavaBean+Servlet工作原理实例讲解
- 电脑数据传输哪款软件好用?
- 将火狐浏览器视频播放倍速设置为3倍速及其以上
- MOSFET的半桥驱动电路设计要领详解
- CentOS 7系统语言修改成英文
- 一步步教你使用云端服务器yeelink远程监控
- 案例 7-1.3 寻找大富翁(25 分)
- 无法访问其它家庭组计算机,Win7电脑同一个家庭组或者工作组,电脑无法相互访问...
- 如何一次打开多个Word文档
- Intellij Idea创建maven项目,App.java代码编辑区没有run选项
- 通过url路径传递参数