二级联动

<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>
···