下拉列表框中的事件应用(联动效果)
程序员文章站
2022-07-13 22:30:49
...
下拉列表框中的事件应用(联动效果)
效果预览
html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="./sel-option.js"></script>
<link type="text/css" href="./sel-option.css" rel="stylesheet"/>
<title>下拉列表框中的事件应用(联动效果)</title>
</head>
<body>
<div class="clsInit">
厂商：<select id="selF"><option>请选择</option></select>
品牌：<select id="selT"><option>请选择</option></select>
型号：<select id="selC"><option>请选择</option></select>
<input type="button" id="button1" value="查询" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>
</body>
</html>
js
$(function(){
function objInit(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){
$("#selF").append("<option>"+pF+"</option>");
});
//厂商列表框选项改变事件
$("#selF").change(function(){
objInit("#selT");
objInit("#selC");
$.each(arrData,function(pF,pS){
//如果厂商选择de数据与数据匹配
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 = "您选择的厂商：";
strValue += $("#selF option:selected").text();
strValue += " 您选择的品牌：";
strValue += $("#selT option:selected").text();
strValue += " 您选择的型号：";
strValue += $("#selC option:selected").text();
$("#divTip").show().addClass("clsTip").html(strValue);//显示提示信息并且增加样式
})
})
css
body{
font-size: 13px;
}
.clsInit{
width: 435px;
height: 35px;
line-height: 35px;
padding-left: 10px;
}
.clsTip{
background-color: #EDFFD5;
padding-top: 5px;
display: none;
}
.btn{
border: 1px solid #666666;
width: 65px;
padding: 2px;
margin-top: 6px;
margin-right: 6px;
float: right;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);
}
select{
height: 28px;
}
总结
遍历部分：
数组arrData部分有三处分隔
1、通过“：” 有“厂商”和其他部分的分隔，其他部分通过“，”分隔，最后是“：”分隔
2、接下来利用了each（）函数进行对数组的遍历，获取“厂商”信息，加入到下拉列表中
3、接下来是对对应“品牌”、“型号”的遍历，遍历完成便加入到下拉列表中