编程 Javascript

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"));

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript实现轮显新闻标题链接

Aug 13 Javascript

前端开发必须知道的JS之原型和继承

Jul 06 Javascript

JS连连看源码完美注释版(推荐)

Dec 09 Javascript

JavaScript实现的一个日期格式化函数分享

Dec 06 Javascript

PHPExcel中的一些常用方法汇总

Jan 23 Javascript

jQuery动态改变多行文本框高度的方法

Sep 07 Javascript

微信小程序自己制作小组件实例详解

Dec 22 Javascript

VUE 更好的 ajax 上传处理 axios.js实现代码

May 10 Javascript

JavaScript之map reduce_动力节点Java学院整理

Jun 29 Javascript

Angular2 父子组件通信方式的示例

Jan 29 Javascript

从零开始搭建一个react项目开发

Feb 09 Javascript

Vue Element UI + OSS实现上传文件功能

Jul 31 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