在线预览
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
body {
padding:40px;
}
.item-row{
margin: 5px 0px;
}
.label-span{
display: inline-block;
width: 150px;
text-align:right;
}
select{
width:120px;
line-height: 28px;
height: 28px;
}
</style>
</head>
<body>
<div class="item-row">
<span class="label-span">销售人员：</span>
<select name="" id="person">
<option value="">请选择</option>
</select>
</div>
<div class="item-row">
<span class="label-span">销售产品：</span>
<select name="" id="product" disabled="disabled">
<option value="">请选择</option>
</select>
</div>
<div class="item-row">
<span class="label-span">城市：</span>
<select name="" id="city" disabled="disabled">
<option value="">请选择</option>
</select>
</div>
<div class="item-row">
<span class="label-span">终端：</span>
<select name="" id="shell" disabled="disabled">
<option value="">请选择</option>
</select>
</div>
<script type="text/javascript">
const Person = [{
"id":"1001",
"nameP":"张三"
},{
"id":"1002",
"nameP":"李四"
}];
const Product = [{
"p_id":"1001",
"s_id":"101",
"nameS":"ipad"
},{
"p_id":"1001",
"s_id":"102",
"nameS":"iphone"
},{
"p_id":"1002",
"s_id":"201",
"nameS":"小米10"
},{
"p_id":"1002",
"s_id":"202",
"nameS":"小米音响"
}];
const City = [{
"s_id":"102",
"id_q":"10201",
"nameq":"洛杉矶"
},{
"s_id":"102",
"id_q":"10202",
"nameq":"加州"
},{
"s_id":"101",
"id_q":"10203",
"nameq":"丹佛"
},{
"s_id":"101",
"id_q":"10204",
"nameq":"纽约"
},{
"s_id":"201",
"id_q":"20203",
"nameq":"北京"
},{
"s_id":"201",
"id_q":"20204",
"nameq":"上海"
},{
"s_id":"202",
"id_q":"20201",
"nameq":"武汉"
},{
"s_id":"202",
"id_q":"20202",
"nameq":"广州"
}];
const Shell = [
{
"z_id":"301",
"id_z":"10201",
"namez":"z终端1"
},
{
"z_id":"302",
"id_z":"10202",
"namez":"z终端2"
},
{
"z_id":"303",
"id_z":"10203",
"namez":"l终端1"
},
{
"z_id":"304",
"id_z":"10204",
"namez":"l终端2"
},
{
"z_id":"401",
"id_z":"20203",
"namez":"z终端3"
},
{
"z_id":"402",
"id_z":"20204",
"namez":"z终端4"
},
{
"z_id":"403",
"id_z":"20201",
"namez":"l终端3"
},
{
"z_id":"404",
"id_z":"20202",
"namez":"l终端4"
}
];
initPeron();
function initPeron(){
Person.forEach(function(item){
var pOption = "<option value='"+item.id+"'>"+item.nameP+"</option>";
$("#person").append(pOption);
});
}
$("#person").change(function(){
$("#product").attr("disabled",false);
$("#product").children(":not(:first)").remove();
$("#city").children(":not(:first)").remove();
$("#shell").children(":not(:first)").remove();
var pId = $("#person").val();
var tempData = [];
Product.forEach(function(item){
if(item.p_id == pId){
tempData.push(item);
}
});
tempData.forEach((item,index)=>{
var opt = new Option(item.nameS,item.s_id);
$("#product").append(opt);
})
});
$("#product").change(function(){
$("#city").attr("disabled",false);
$("#city").children(":not(:first)").remove();
$("#shell").children(":not(:first)").remove();
var sId = $("#product").val();
var tempData = [];
City.forEach(function(item){
if(item.s_id == sId){
tempData.push(item);
}
});
tempData.forEach((item,index)=>{
var opt = new Option(item.nameq,item.id_q);
$("#city").append(opt);
})
});
$("#city").change(function(){
$("#shell").attr("disabled",false);
$("#shell").children(":not(:first)").remove();
var sId = $("#city").val();
var tempData = [];
Shell.forEach(function(item){
if(item.id_z == sId){
tempData.push(item);
}
});
tempData.forEach((item,index)=>{
var opt = new Option(item.namez,item.id_z);
$("#shell").append(opt);
})
});
</script>
</body>
</html>
