首先准备好页面代码：
复制代码 代码如下:
主要通过jQuery的append方法动态添加内容，脚本代码如下：
复制代码 代码如下:
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript"> <br>$(document).ready(function () { <br>$("#ddlFirst").bind("change", function () { // 添加change事件 <br>$("#ddlSecond option").remove(); // 先删除所有项，以便重新加载 <br>$("#ddlSecond").append("<option value=''>--- 请选择 ---"); <br>if ($(this).val() == 1) { <br>$("#ddlSecond").append("<option value='11'>红色1"); <br>$("#ddlSecond").append("<option value='12'>红色2"); <br>$("#ddlSecond").append("<option value='13'>红色3"); <br>} <br>else if ($(this).val() == 2) { <br>$("#ddlSecond").append("<option value='21'>黄色1"); <br>$("#ddlSecond").append("<option value='22'>黄色2"); <br>$("#ddlSecond").append("<option value='23'>黄色3"); <br>} <br>else if ($(this).val() == 3) { <br>$("#ddlSecond").append("<option value='31'>蓝色1"); <br>$("#ddlSecond").append("<option value='32'>蓝色2"); <br>$("#ddlSecond").append("<option value='33'>蓝色3"); <br>} <br>}); <br>}); <br></script>
最终显示效果如下：
动态添加内容还可以通过以下方式添加：
$("#ddlSecond").append($("").val("31").html("蓝色1"));
