宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-10-11

首先准备好页面代码:复制代码代码如下:表单id=' form 1 ' runat=' server ' div align=' left '字段集style=' width : 350 px高度: 150像素选择颜色/p表格单元格填充='0 '单元格间距='0 '边框=' 0 ' tr TD/TD TD ASP : dropdownlist ID=' ddlFirst ' runat=' server ' ASP : listitem Value=' Text='-请选择-'/asp: istitem asp: istitem Value=' 1 ' Text='红色/asp3360 istitem asp: istitem值='2 '文本='黄色/asp3360 istitem asp: istitem值='3 '文本='蓝色/asp3360 list item/asp: dropdownlist/TD/tr TD colspan=' 2 '/TD/tr TD/TD asp: dropdownlist ID=' ddlSecond ' runat=' server ' asp3360 list item Value=' Text '='-请选择-'/ASP : list item/ASP 3360 dropdownlist/TD/tr/table/field set/div/form主要通过jQuery的附加方法动态添加内容,脚本代码如下:复制代码代码如下: head runat=' server ' title食谱8/title脚本src=' http :脚本/jquery-1。 4 .1-vsdoc。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。ready(function(){ $(' # ddlfrst ')).bind('change ',function () { //添加变化事件$('#ddlSecond选项')。移除();//先删除所有项,以便重新加载$('#ddlSecond ').追加('选项值=' ')请选择-/option ');if ($(this).val()==1) { $('#ddlSecond ').追加('选项值='11 '红色1/选项');$('#ddlSecond ').追加('选项值='12 '红色2/选项');$('#ddlSecond ').追加('选项值='13 '红色3/选项');} else if ($(this).val()==2) { $('#ddlSecond ').追加('选项值='21 '黄色1/选项');$('#ddlSecond ').追加('选项值='22 '黄色2/选项');$('#ddlSecond ').追加('选项值='23 '黄色3/选项');} else if ($(this).val()==3) { $('#ddlSecond ').追加('选项值='31 '蓝色1/选项');$('#ddlSecond ').追加('选项值='32 '蓝色2/选项');$('#ddlSecond ').追加('选项值='33 '蓝色3/选项');} });});/脚本/标题最终显示效果如下

动态添加内容还可以通过以下方式添加:$('#ddlSecond ').追加($("选项/选项")。瓦尔(' 31 ').html(")蓝色1'));

更多资讯
游戏推荐
更多+