jquery三级下拉框联动

最新推荐文章于 2025-11-28 04:56:28 发布

最新推荐文章于 2025-11-28 04:56:28 发布 · 115 阅读

文章标签：

本文介绍了一个使用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>