ASP.NETjQuery实例8(动态添加内容到DropDownList)_jquery



首先准备好页面代码：
代码如下:


主要通过jQuery的append方法动态添加内容，脚本代码如下：
代码如下:




$(document).ready(function () {
$("#ddlFirst").bind("change", function () { // 添加change事件
$("#ddlSecond option").remove(); // 先删除所有项，以便重新加载
$("#ddlSecond").append("--- 请选择 ---");
if ($(this).val() == 1) {
$("#ddlSecond").append("红色1");
$("#ddlSecond").append("红色2");
$("#ddlSecond").append("红色3");
}
else if ($(this).val() == 2) {
$("#ddlSecond").append("黄色1");
$("#ddlSecond").append("黄色2");
$("#ddlSecond").append("黄色3");
}
else if ($(this).val() == 3) {
$("#ddlSecond").append("蓝色1");
$("#ddlSecond").append("蓝色2");
$("#ddlSecond").append("蓝色3");
}
});
});

最终显示效果如下：

动态添加内容还可以通过以下方式添加：
$("#ddlSecond").append($("").val("31").html("蓝色1"));