jq根据json数据，动态生成一个二级联动菜单

Posted 2023-02-03 web_hwg

jq根据json数据，动态生成一个二级联动菜单

• • html
  • json数据
  • jq循环

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