javascript动态控制服务器控件实例


Posted in Javascript onSeptember 05, 2014

最近多个页面需要加载一些下拉列表框,供用户选择,原来都是在服务器端进行加载应运用。最后由于业务逻辑方面的考虑,需要将DropDownList的部分功能放到客户端实现。现在下拉列表的功能使用起来感觉比全部放到服务器端性能好多了。

具体方法:

在页面中放入一个DropDownList控件,并添加一项,用来分析其产生的HTML代码,这样在使用js进行动态控制时,将会非常清晰其测试代码如下所示:

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

在浏览器中查看,并对Html进行分析:以下是DropDownList控件生成的HTML代码。和普通的select没

有区别。那么也就可以通过js来动态填充、删除、选择等控制。

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

可以将<asp:ListItem>1</asp:ListItem>删除,现在添加两个HTML button控件,分别用来实现添加选项,和删除所有选项。Button源码如下:

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部删除Option" onclick="delOption()" />

添加和删除函数如下所示:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的,之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");

var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}

}

function delOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE两种均支持
}
}

在浏览器中查看,可以轻松地创建选择下拉选项,由于这些是客户端生成,因此其效率上要高于服务器

端工作的代码。但是这个时候如果要使用DropDownList1.SelectedValue获取用户选择的选项,那么你会得

到一个错误。这是由于DropDownList是由JS动态添加的,因此,它的项不属于ViewState,并且不被维护,

也就是说我们无法在服务器端对其进行处理。为了解决这一问题,可以使用两种方式:1、Hidden控件保存

用户选项方式;2、Request.Form方式。(参见msdn品味Ajax)

1、我们在页面中添加一个Hidden控件,用它来保存DropDownList选项变化的信息,这样在用户选择感

兴趣的信息之后,我们就可以在服务器端获取信息,并进行处理,合理地实现客、服之间的分工。

对DropDownList控件添加一个onchange事件,此时它的html代码如下所示:

<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()">
</asp:DropDownList>

Onchange事件如下所示,该事件主要保存用户选定的value:

function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}

在此之后,我们使用一个asp:button控件来测验结果:

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

到此,已经完成了所有的工作,但是还有一个问题,DropDownList的change事件只有在用户改变下拉选

项时才会触发。因此,用户使用默认选项进行提交时,则获取空值。因此我们可以在填充option时,即对

hidden初始化。对addOption事件添加一行代码如下:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的,之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");
var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}
document.getElementById("HiddenField1").value = optValue[0];
}

不过以上红色部分在TT浏览器下ADD不成功,其他浏览还没试过,以下是另一个种写法:

function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);

var DeptList=Guest_UserRegister.GetDeptList(v.value).value;

var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}

}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}
Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 #Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 #Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 #Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 #Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 #Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 #Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 #Javascript
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python最长公共子串算法实例
2015/03/07 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
电钳专业个人求职信
2014/01/04 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
高中生操行评语
2014/04/25 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
公司授权委托书
2014/10/17 职场文书
三方合作意向书范本
2015/05/09 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫