jquery实现数据三级联动
程序员文章站
2024-03-05 15:18:13
...
<style>
*{ margin: 0;padding: 0;}
table {border-spacing: 0;border-collapse: collapse;}
td { display: table-cell;vertical-align: inherit; }
th {display: table-cell;vertical-align: inherit; font-weight: bold;height: 50px;}
tr{height: 40px;}
.box{padding: 20px;}
td{text-align: center;}
select{ background: transparent;width: 180px;height: 30px; border-radius: 40px; border: 1px solid #333; }
</style>
<body>
<div class="box">
区域: <select name="" id="a">
<option value="">请选择</option>
<option value="">广州市</option>
<option value="">上海市</option>
<option value="">台北市</option>
</select>
城市: <select name="" id="b">
<option value="">请选择</option>
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
</select>
地址: <select name="" id="c">
<option value="">请选择</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</div>
<table class="tbs" border="2" width="100%" height="auto" cellspacing="0" cellpadding="5px" align="center">
<thead>
<tr>
<th rowspan="2">所在区域</th>
<th rowspan="2">所在城市</th>
<th rowspan="4">所在地址</th>
<th rowspan="2">数据</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</body>
<script>
var list =[
{
city : '广州市',
b:'aaaaa',
c:'11111',
d:'xxxxxxs'
}, {
city : '广州市',
b:'bbbbbb',
c:'22222',
d:'xxxxxxs'
},
{
city : '北京市',
b:'bbbbb',
c:'22222222',
d:'xxxxxxs'
},
{
city : '北京市',
b:'bbbbb',
c:'22222222',
d:'xxxxxxs'
},
{
city : '上海市',
b:'ccccccccc',
c:'3333333',
d:'xxxxxxs'
},
{
city : '上海市',
b:'ccccccccc',
c:'3333333',
d:'xxxxxxs'
},
{
city : '台北市',
b:'bbbbbbbbbbb',
c:'444444',
d:'xxxxxxs'
},
{
city : '台北市',
b:'cccccccc',
c:'444444',
d:'xxxxxxs'
}
];
function flush( list){
$("#tbody").children().remove();
$(list).each(function(i,data){
$('#tbody').append(`<tr>
<td>${data.city}</td>
<td>${data.b}</td>
<td>${data.c}</td>
<td>${data.d}</td>
</tr>`);
});
}
var a = '';
var b = '';
var c = '';
$("#a").change(function(){
var text = $('#a option:selected').text();
if(text =='请选择'){
a = '';
}else{
a =text;
}
filter();
});
$("#b").change(function(){
var text = $('#b option:selected').text();
if(text =='请选择'){
b = '';
}else{
b = text;
}
filter();
});
$("#c").change(function(){
var text = $('#c option:selected').text();
if(text =='请选择'){
c = '';
}else{
c =text;
}
filter();
});
function filter(){
var newList = list.filter(o =>{
var flag1 = o.city.indexOf(a);
var flag2 = o.b.indexOf(b);
var flag3 = o.c.indexOf(c);
return flag1 >=0 ? ( flag2>=0 ? (flag3>=0 ?true:false ):false) :false;
})
flush(newList);
}
flush(list);
</script>
上一篇： 利用 jQuery实现省市县三级联动
下一篇： Java之IO流