本文介绍了一个使用jQuery实现的动态更新下拉列表选项的示例。当用户选择第一个下拉列表中的选项时，会根据所选内容更新第二个及第三个下拉列表的内容。此示例展示了如何使用JavaScript和HTML来创建交互式的网页元素。
$(document).ready(function (){
var options1={"a":["a1","a2"],b:["b1","b2"]};
var options2={"a1":["a11","a12"],"a2":["a21","a22"],"b1":["b11","b12"],"b2":["b21","b22"]};
$("#sel1").change(function(){
$("#sel2").empty();
$("#sel3").empty();
for(var i=0;i<options1[$("#sel1").val()].length;i++){
$("#sel2").append("<option value="+options1[$(this).val()][i]+">"+options1[$(this).val()][i]+"</option>");
for(var j=0;j<options2[options1[$(this).val()][i]].length;j++){
$("<option>"+options2[options1[$(this).val()][i]][j]+"</option>").appendTo($("#sel3"));
}
}
});
$("#sel2").change(function(){
$("#sel3").empty();
for(var i=0;i<options2[$(this).val()].length;i++){
$("<option>"+options2[$(this).val()][i]+"</option>").appendTo($("#sel3"));
}
});
});
<select id="sel1"> <option value="a"> a </option> <option value="b"> b </option> </select> <select id="sel2"> <option> a1 </option> <option> b1 </option> </select> <select id="sel3"> <option> a11 </option> <option> b11 </option> </select>
<select id="sel1"> <option value="a"> a </option> <option value="b"> b </option> </select> <select id="sel2"> <option> a1 </option> <option> b1 </option> </select> <select id="sel3"> <option> a11 </option> <option> b11 </option> </select>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
