（1）功能描述：
为实现根据厂商、名牌、型号查询车型的功能，在页面中，设置三个下拉列表框，分别用于保存厂商、名牌、型号的数据。
当用户在选择厂商时，名牌和型号下拉列表框随其数据变化而变化；当用户选择名牌时，型号下拉列表框随其所选数据变化而改变，
从而实现了三个下拉列表框联动展示数据的功能。单机"查询"按钮时，显示用户所选择的全部选项。
（2）实现代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>下拉列表框中的事件应用</title> 6 <style> 7 body{font-size: 13px;} 8 .clsInit{width: 460px;height: 35px;line-height: 35px;padding-left: 10px;} 9 .clsTip{padding-top: 5px;background-color: #eee;display: none;} 10 .btn{border: solid 1px #666;padding: 2px;width: 65px;float: right;margin-top: 6px;margin-right: 6px;} 11 </style> 12 <script src="jquery.js"></script> 13 <script> 14 $(function(){ 15 function objInit(obj){ //下拉列表框初始化 16 return $(obj).html("<option>请选择</option>"); 17 } 18 var arrData = { //定义一个数组保存相关数据 19 厂商1:{品牌1_1:"型号1_1_1,型号1_1_2", 20 品牌1_2:"型号1_2_1,型号1_2_2"}, 21 厂商2:{品牌2_1:"型号2_1_1,型号2_1_2", 22 品牌2_2:"型号2_2_1,型号2_2_2"}, 23 厂商3:{品牌3_1:"型号3_1_1,型号3_1_2", 24 品牌3_2:"型号3_2_1,型号3_2_2"} 25 }; 26 $.each(arrData,function(pF){ //遍历数据增加厂商项 27 $("#selF").append("<option>"+pF+"</option>"); 28 }); 29 $("#selF").change(function(){ //厂商列表框选项改变事件 30 objInit("#selT"); 31 objInit("#selC"); 32 $.each(arrData,function(pF,pS){ 33 //如果厂商选中项与数据匹配 34 if($("#selF option:selected").text()==pF){ 35 //遍历数据增加品牌项 36 $.each(pS,function(pT,pC){ 37 $("#selT").append("<option>"+pT+"</option>"); 38 }); 39 //品牌列表框选项改变事件 40 $("#selT").change(function(){ 41 objInit("#selC"); 42 $.each(pS,function(pT,pC){ 43 //如果品牌选中项与数据匹配 44 if($("#selT option:selected").text()==pT){ 45 //遍历数据增加型号项 46 $.each(pC.split(","),function(){ 47 $("#selC").append("<option>"+this+"</option>") 48 }); 49 } 50 }); 51 }); 52 } 53 }); 54 }); 55 56 $("#Button1").click(function(){ //注册按钮单机事件 57 var strValue = "您选择的厂商："; 58 strValue += $("#selF option:selected").text(); 59 strValue += " 您选择的品牌："; 60 strValue += $("#selt option:selected").text(); 61 strValue += " 您选择的型号："; 62 strValue += $("#selC option:selected").text(); 63 $("#divTip") 64 .show() 65 .addClass("clsTip") 66 .html(strValue);//显示提示信息饼增加样式 67 }); 68 }); 69 </script> 70 </head> 71 <body> 72 <div class="clsInit"> 73 厂商：<select id="selF"><option value="">请选择</option></select> 74 品牌：<select id="selT"><option value="">请选择</option></select> 75 型号：<select id="selC"><option value="">请选择</option></select> 76 <input type="button" value="查询" id="Button1" class="btn" /> 77 </div> 78 <div class="clsInit" id="divTip"></div> 79 </body> 80 </html>