jq根据json数据,动态生成一个二级联动菜单
Posted web_hwg
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq根据json数据,动态生成一个二级联动菜单相关的知识,希望对你有一定的参考价值。
jq根据json数据,动态生成一个二级联动菜单
html
蔬菜:<select name="vegetable" id="vegetable">
<option value="0">请选择类别一</option>
</select>
水果:<select name="fruit" id="fruit">
<option value="0">请选择类别二</option>
</select>
json数据
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>');
// 重点:获取当前选择的value
let index = $(this).val() - 1;
if(index < 0)
return;
// 根据value去循环相对应的food
for(let item of menu[index].food)
let html = `<option value="$item.food_id">$item.name</option>`;
$('#fruit').append(html)
)
以上是关于jq根据json数据,动态生成一个二级联动菜单的主要内容,如果未能解决你的问题,请参考以下文章