1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>列表框中事件应用</title> 6 <script src="jquery-2.1.0.js"></script> 7 <style type="text/css"> 8 body { 9 font-size:13px; 10 } 11 .clsInit { 12 width:435px; 13 height:35px; 14 line-height:35px; 15 padding-left:10px; 16 } 17 .clsTip { 18 padding-top:5px; 19 background-color:#00ffff; 20 display:none; 21 } 22 .btn { 23 border: 1px solid #666; 24 padding: 2px; 25 width: 65px; 26 float: right; 27 margin-top: 6px; 28 margin-right: 5px; 29 filter: progid:DxImageTransForm.Microsoft.Oradient(GradientType=0,StartColorStr=#fffff,EndColorStr=#ECE9D8); 30 } 31 32 </style> 33 <script type="text/javascript"> 34 $(function () { 35 function objInt(obj) { 36 return $(obj).html("<option>请选择</option>"); 37 } 38 var arrData = { 39 厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" }, 40 厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2-1,型号2_2_2" }, 41 厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3-2-1,型号3_2_2" }, 42 }; 43 $.each(arrData, function (pF) { 44 $("#sleF").append("<option>" + pF + "</option>"); 45 }); 46 $("#sleF").change(function () { 47 objInt("#sleT"); 48 objInt("#sleC"); 49 $.each(arrData, function (pF, pS) { 50 if ($("#sleF option:selected").text() == pF) { 51 $.each(pS, function (pT, pC) { 52 $("#sleT").append("<option>" + pT + "</option>"); 53 }); 54 $("#sleT").change(function () { 55 objInt("#sleC"); 56 $.each(pS, function (pT, pC) { 57 if ($("#sleT option:selected").text() == pT) { 58 $.each(pC.split(","), function () { 59 $("#sleC").append("<option>" + this + "</option>"); 60 }); 61 } 62 }); 63 }); 64 } 65 }); 66 }); 67 $("#Button1").click(function () { 68 var strValue = "你选择的："; 69 strValue += $("#sleF option:selected").text(); 70 strValue += "你的品牌为："; 71 strValue += $("#sleT option:selected").text(); 72 strValue += "你的型号为："; 73 strValue += $("#sleC option:selected").text(); 74 $("#divTip").show().addClass("clsTip").html(strValue); 75 }); 76 }) 77 </script> 78 </head> 79 <body> 80 <div class="clsInit"> 81 厂商:<select id="sleF"><option>请选择</option></select> 82 品牌:<select id="sleT"><option>请选择</option></select> 83 型号:<select id="sleC"><option>请选择</option></select> 84 <input id="Button1" type="button" value="查询" class="btn" /> 85 </div> 86 <div class="clsInit" id="divTip"></div> 87 </body> 88 </html>