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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 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
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
python利用装饰器进行运算的实例分析
2015/08/04 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python斐波那契数列的计算方法
2018/09/27 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
提高python代码运行效率的一些建议
2020/09/29 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
局域网标准
2016/09/10 面试题
自我鉴定思想方面
2013/10/07 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
学校创先争优活动总结
2014/08/28 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
入党自荐书范文
2015/03/05 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL