二级联动
2019-04-02 本文已影响0人
王远清orz
<select name="" class="parent">
<option value="">请选择</option>
</select>
<select name="" class="son" style="width:64px">
</select>
<script>
$(function(){
var menu = [
{'tape_id':1,'name':'大菜','food':[
{'food_id':1,'name':'鱼香肉丝','price':'10'},
{'food_id':2,'name':'红烧肉','price':'11'},
{'food_id':3,'name':'香辣粉','price':'12'}
]},
{'tape_id':2,'name':'中菜','food':[
{'food_id':4,'name':'小炒肉','price':'13'},
{'food_id':5,'name':'云吞','price':'14'}
]},
{'tape_id':3,'name':'小菜','food':[
{'food_id':1,'name':'雪糕','price':'15'},
{'food_id':2,'name':'黄瓜','price':'16'}
]}
];
// 1.加载父节点元素
for( var i = 0; i < menu.length; i++){
var obj = menu[i];
// console.log(obj);
$('.parent').append('<option value='+obj.tape_id+'>'+obj.name+'</option>')
}
// 2.给父节点添加change事件
$('.parent').change(function() {
var parentVal = $(this).val();
// console.log(parentVal); 返回的事字符串类型
// 清空子节点,避免重复添加
$('.son').empty();
// 3.加载子节点元素
for( var j = 0; j < menu.length; j++){
var parentMenu = menu[j];//重新加载,上面obj已经循环完成了
//console.log(parentMenu);
// console.log(parentMenu.tape_id)
if(+parentVal === parentMenu.tape_id){//不能用===,类型不同,前面加+,转成num类型
var sonMenu = parentMenu.food;//子节点是父节点的food内容
// console.log(sonMenu);
for( var num = 0; num < sonMenu.length; num++){
var son = sonMenu[num];
// 加载对应的子节点
$('.son').append('<option value='+son.food_id+'>'+son.name+'</option>');
}
}
}
});
})
</script>
···