<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
.clsInit{
435px;
height:35px;
line-height: 35px;
padding-left: 10px
}
.clsTip{
padding-top: 5px;
background-color: #eee;
display: none;
}
.btn{
border:#666 1px solid;
padding:2px;
65px;
float: right;
margin-top: 6px;
margin-right: 6px;
}
</style>
</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="Button" type="button" value="查询" class="btn">
</div>
<div class="clsInit" id="divTip"></div>
<script type="text/javascript">
$(function(){
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"}
};
function objInit(obj){
return $(obj).append("<option>请选择</option>");
};
$.each(arrData,function(pF,pS){
$("#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>");
})
}
})
})
}
})
})
$("#Button").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>
</body>
</html>