首页 > 代码库 > Jquery实现下拉联动表单
Jquery实现下拉联动表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉框表单联动</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
function objInit(obj){
return $(obj).html("<option>请选择</option>");
};
var arrData=http://www.mamicode.com/{
厂商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="http://www.mamicode.com/您选择的厂商：";
strValue+=$("#selF option:selected").text();
strValue+=" 您选择的品牌：";
strValue+=$("#selT option:selected").text();
strValue+=" 您选择的型号：";
strValue+=$("#selC option:selected").text();
$("#divTip").show().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="http://www.mamicode.com/查询" class="btn"/>
</div>
<div class="clsInit" id="divTip" style="display:none;"></div>
</body>
</html>