ASP.NET jQuery 实例8 (动态添加内容到DropDownList)


Posted in Javascript onFebruary 03, 2012

首先准备好页面代码:

<form id="form1" runat="server"> 
<div align="left"> 
<fieldset style="width: 350px; height: 150px"> 
<p> 
选择颜色</p> 
<table cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<td> 
  
</td> 
<td> 
<asp:DropDownList ID="ddlFirst" runat="server"> 
<asp:ListItem Value="" Text="--- 请选择 ---"></asp:ListItem> 
<asp:ListItem Value="1" Text="红色"></asp:ListItem> 
<asp:ListItem Value="2" Text="黄色"></asp:ListItem> 
<asp:ListItem Value="3" Text="蓝色"></asp:ListItem> 
</asp:DropDownList> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
  
</td> 
</tr> 
<tr> 
<td> 
  
</td> 
<td> 
<asp:DropDownList ID="ddlSecond" runat="server"> 
<asp:ListItem Value="" Text="--- 请选择 ---"></asp:ListItem> 
</asp:DropDownList> 
</td> 
</tr> 
</table> 
</fieldset> 
</div> 
</form>

主要通过jQuery的append方法动态添加内容,脚本代码如下:
<head runat="server"> 
<title>Recipe8</title> 
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#ddlFirst").bind("change", function () { // 添加change事件 
$("#ddlSecond option").remove(); // 先删除所有项,以便重新加载 
$("#ddlSecond").append("<option value=''>--- 请选择 ---</option>"); 
if ($(this).val() == 1) { 
$("#ddlSecond").append("<option value='11'>红色1</option>"); 
$("#ddlSecond").append("<option value='12'>红色2</option>"); 
$("#ddlSecond").append("<option value='13'>红色3</option>"); 
} 
else if ($(this).val() == 2) { 
$("#ddlSecond").append("<option value='21'>黄色1</option>"); 
$("#ddlSecond").append("<option value='22'>黄色2</option>"); 
$("#ddlSecond").append("<option value='23'>黄色3</option>"); 
} 
else if ($(this).val() == 3) { 
$("#ddlSecond").append("<option value='31'>蓝色1</option>"); 
$("#ddlSecond").append("<option value='32'>蓝色2</option>"); 
$("#ddlSecond").append("<option value='33'>蓝色3</option>"); 
} 
}); 
}); 
</script> 
</head>

最终显示效果如下:

ASP.NET jQuery 实例8 (动态添加内容到DropDownList)


动态添加内容还可以通过以下方式添加:
$("#ddlSecond").append($("<option></option>").val("31").html("蓝色1"));
Javascript 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 #Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 #Javascript
jQuery.extend 函数详解
Feb 03 #Javascript
jquery插件开发方法(初学者)
Feb 03 #Javascript
jquery插件制作简单示例说明
Feb 03 #Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
python解析文件示例
2014/01/23 Python
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python实现决策树
2017/12/21 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
小学英语教学反思案例
2014/02/04 职场文书
考核评语大全
2014/04/29 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
实习单位推荐信
2015/03/27 职场文书