let menu =[{"type_id":1,"name":"蔬菜","food":[{"food_id":1,"name":"白菜","price":"10"},{"food_id":2,"name":"冬瓜","price":"10"},{"food_id":3,"name":"西蓝花","price":"10"}]},{"type_id":2,"name":"水果","food":[{"food_id":4,"name":"香蕉","price":"10"},{"food_id":5,"name":"苹果","price":"10"},{"food_id":6,"name":"橙子","price":"10"}]}];
jq循环
// 根据menu的数据,动态生成一个二级联动菜单for(let item of menu){let html =`<option value="${item.type_id}">${item.name}</option>`;$('#vegetable').append(html)}$('#vegetable').change(function(){// 每次改变选择时,应先清空二级下拉框$('#fruit').html('<option value="0">请选择类别二</option>');// 重点:获取当前选择的valuelet index =$(this).val()-1;if(index <0){return;}// 根据value去循环相对应的foodfor(let item of menu[index].food){let html =`<option value="${item.food_id}">${item.name}</option>`;$('#fruit').append(html)}})