JavaScript与DropDownList

最新推荐文章于 2019-06-27 03:03:57 发布
最新推荐文章于 2019-06-27 03:03:57 发布
阅读量5.2k 收藏 9
点赞数
分类专栏： ASP.NET Javascript 文章标签： javascript function textbox dataset asp server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sytweibo/article/details/4395094
版权

服务器控件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 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" οnchange="CountryChange()" OnSelectedIndexChanged="ddlContry_SelectedIndexChanged">
<asp:ListItem Value=" ">请选择所属国家</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlProvince" runat="server" οnchange="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());
}

 

sytWeibo
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用js添加DropDownList的项
01-22
如果在服务器端对一个服务器端控件（如DropDownList）进行绑定后，起状态将被保存；在客户端对DropDownList（Select）赋值时，不会保存状态。当你执行提交时，会将页面发送至服务器端，通过Page_Load事件处理，在返回到请求的页面。由于没有保存状态，所以列表被清空。之后才会执行按钮提交的事件，当然也就取不到值了。所以，有两个解决的办法。一、该页面不向服务器端提交页面，你可以通过请求其他页面，将返回值通过javascript来控制和输出。二、在提交页面之前，实现将要取的值存入一个<input type="hidden" />中（保存状态）。这样，就能保证取到你需要的值，当然，那个列表还是空的，除非为Select的每一个Option都保存一个状态（那是很没必要的）。 希望我的这些经验和解决方法对你们有用！
javascript 操作 drop down list
a3391111的博客
11-26 400
javascript 操作 drop down list 和 listbox 在平时，我们会经常用到javascript来操作.net 控件。 而 dropdownlist 和 listbox 是出现频率比较高的，我只是将一些基本的用法贴在这里，仅供参考。 添加items 到 dropdownlist 中，Example: 代码 function AddItem(Text,V...
Javascript实现对dropdownlist的操作
James_Xianfei的专栏
10-09 292
        function changeListRateModel()         {            var listPaymentModel = document.getElementById("listPaymentModel");            var listRateModel = document.getElementById("listRateModel");
javascript 对 dropdownlist 的操作
黄镇红的专栏
09-18 653
javascript 对 dropdownlist 的操作
JavaScript与DropDownList 区别分析
10-29
大家都知道，.NET中一些Web服务器控件解析并编译，最终被渲染的时候，其实是转化成了普通的html控件。
GridView：使用JavaScript的动态级联DropDownList
04-07
关于如何使用JavaScript在ASP.NET GridView控件中实现动态级联DropDownList的快速示例
用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置
10-27
用Javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置;准备数据，创建一个对象，将是存储DropDownList控件每个Item数据
客户端用JavaScript填充DropDownList控件 服务器端读不到值
10-28
今天遇到一个奇怪的问题，某一页面需要使用三级级联下拉列表框。为提高用户体验，采用jQuery的cascadingDropDown插件调用后台Web Services来实现ajax填充。
JavaScript 操作 DropDownList（.net）
chy2z的专栏
04-25 215
document.getElementById("DropDownList1").options.length //获的长度 document.getElementById("DropDownList1").selectedIndex //获得DropDownList1当前选中的索引document.getElementById("DropDownList1").options[documen
jquery异步绑定dropdownlist
08-05
jquery异步绑定dropdownlist
AjaxControlToolkit环境下用Javascript实现简单的Dropdownlist
野文的专栏
05-09 1395
　　在项目中对下拉框的样式有严格的要求，传统dropdownlist右边的三角要换成一个自定义图片，且要求在ie和firefox下都能兼容（dropdownlist即html的select在firefox下边框不好处理）。所以就索性用javascript写了一个自定义的dropdownlist。虽然最后因“使用javascript过滥”而未被采用，但还是值得记录一下。　　先看一下效果图：
JavaScript为DropDownList添加新项
weixin_33957648的博客
06-27 502
JS获取DropDownList的value值与text值 <scripttype="text/javascript"language="javascript"> functionSearchChange() { varddl=document.getElementById("DropDownList1") ...
Js得到radiobuttonlist选中值的两种方法
sytWeibo的专栏
07-30 6337
            WebForm1                                http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">                 function getvalue()        {        var b=document.all.rbti
JS中“null'document.getElementById为空或不是对象” 的解决办法
sytWeibo的专栏
08-08 5685
JS中“nulldocument.getElementById为空或不是对象” 的解决办法1. null为空或不是对象: 里面加个defer=true属性试试看，即:2. document.getElementById为null原因: var titab=document.getElementById("titletab");没有取到对象 解决
js获取DropDownList的选择项
sytWeibo的专栏
01-22 2120
js获取DropDownList的选择项     --类型--    台宣    广告    音乐 var ddlProgramCategory = $();var categoryID = ddlProgramCategory.options[ddlProgramCategory.selectedIndex].value;
js广告代码大全
sytWeibo的专栏
07-06 951
今天发现了两个js广告特效非常全的网址。拿出来跟大家分享一下。O(∩_∩)O哈哈~ http://ad.cnzz.cc/ http://ad.jz123.cn/
36种正则表达式匹配表达式
sytWeibo的专栏
08-27 909
intege:"^-?[1-9]//d*$",     //整数 intege1:"^[1-9]//d*$",     //正整数 intege2:"^-[1-9]//d*$",     //负整数 num:"^([+-]?)//d*//.?//d+$",   //数字 num1:"^[1-9]//d*|0$",     //正数（正整数 + 0） num2:"^-[1-9]//d*|0$",  
el-dropdownlist单击事件
最新发布
10-18
```javascript methods: { handleClick(command) { console.log(`您单击了 ${command} 选项`); } } ``` 在上面的代码中，我们在 el-dropdown 标签上绑定了 @command 事件，并将其指向 handleClick 方法。当用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值