<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表框中事件应用</title>
<script src="jquery-2.1.0.js"></script>
<style type="text/css">
body {
font-size:13px;
}
.clsInit {
width:435px;
height:35px;
line-height:35px;
padding-left:10px;
}
.clsTip {
padding-top:5px;
background-color:#00ffff;
display:none;
}
.btn {
border: 1px solid #666;
padding: 2px;
width: 65px;
float: right;
margin-top: 6px;
margin-right: 5px;
filter: progid:DxImageTransForm.Microsoft.Oradient(GradientType=0,StartColorStr=#fffff,EndColorStr=#ECE9D8);
}
</style>
<script type="text/javascript">
$(function () {
function objInt(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) {
$("#sleF").append("<option>" + pF + "</option>");
});
$("#sleF").change(function () {
objInt("#sleT");
objInt("#sleC");
$.each(arrData, function (pF, pS) {
if ($("#sleF option:selected").text() == pF) {
$.each(pS, function (pT, pC) {
$("#sleT").append("<option>" + pT + "</option>");
});
$("#sleT").change(function () {
objInt("#sleC");
$.each(pS, function (pT, pC) {
if ($("#sleT option:selected").text() == pT) {
$.each(pC.split(","), function () {
$("#sleC").append("<option>" + this + "</option>");
});
}
});
});
}
});
});
$("#Button1").click(function () {
var strValue = "你选择的：";
strValue += $("#sleF option:selected").text();
strValue += "你的品牌为：";
strValue += $("#sleT option:selected").text();
strValue += "你的型号为：";
strValue += $("#sleC option:selected").text();
$("#divTip").show().addClass("clsTip").html(strValue);
});
})
</script>
</head>
<body>
<div class="clsInit">
厂商:<select id="sleF"><option>请选择</option></select>
品牌:<select id="sleT"><option>请选择</option></select>
型号:<select id="sleC"><option>请选择</option></select>
<input id="Button1" type="button" value="查询" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>
</body>
</html>