还是老规矩，先来看下效果图：
图1：
图2：
图3：
图4：
这就省份等常见的级联下拉列表框的原型；下面来看看代码的构成
<html><head><meta charset="UTF-8"><title>标题</title><script language="JavaScript" type="text/javascript" src="js/jquery-1.8.2.min.js"></script><style>body{font-size: 13px;}.clsInit{width: 435px;height: 35px;line-height: 35px;padding-left: 10px;}.divTip{padding-top: 5px;background-color: #eee;display: none;}.btn{border: #666 1px solid;padding: 2px;width: 65px;float: right;margin-top: 6px;margin-right: 6px;}</style><script type="text/javascript">$(function(){function objInit(obj){return $(obj).html("<option>选择请</option>");}var arrData = {厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }};$.each(arrData,function(pF){//遍历数据增加厂商项$("#selF").append("<option>"+pF+"</option>");});$("#selF").change(function(){//厂商列表框选项改变事件objInit("#selT");objInit("#selC");$.each(arrData,function(pF,pS){if($("#selF option:selected").text()==pF){//如果厂商选中项与数据匹配$.each(pS,function(pT,pC){//遍历数据增加品牌项$("#selT").append("<option>"+pT+"</option>");});$("#selT").change(function(){//品牌列表框选项改变事件objInit("#selC");$.each(pS,function(pT,pC){if($("#selT option:selected").text()==pT){//如果品牌选中项与数据匹配$.each(pC.split(","),function(){//遍历数据增加型号项$("#selC").append("<option>"+this+"</option>");});}});});}});});$("#Button1").click(function() { //注册按钮单击事件var strValue = "您选择的厂商:";strValue += $("#selF option:selected").text();strValue += "您选择的品牌:";strValue += $("#selT option:selected").text();strValue += "您选择的型号:";strValue += $("#selC option:selected").text();$("#divTip").show().addClass("clsTip").html(strValue); //显示提示信息并增加样式});})</script></head><body><div class="clsInit">厂商：<select id="selF"><option>请选择</option></select> 品牌：<select id="selT"><option>请选择</option></select> 型号：<select id="selC"><option>请选择</option></select> <input id="Button1" type="button" value="查询" class="btn" /></div> <div class="divTip" id="divTip"></div></body></html>
