jQuery JSON 二級聯動指的是通過使用 jQuery 庫和 JSON 數據來實現一個二級菜單聯動的功能。在這個功能中,第一個菜單作為父級菜單,用戶選擇其中一項后,第二個菜單根據父級菜單的選擇展示相應的子級菜單。
<script>
$(document).ready(function() {
$('#parent_menu').change(function() {
var parent_id = $(this).val();
var child_menu = $('#child_menu');
child_menu.empty();
$.getJSON('child_menu_data.json', function(data) {
$.each(data[parent_id], function(index, value) {
child_menu.append('<option>' + value + '</option>');
});
});
});
});
</script>
代碼中,我們使用 jQuery 的 AJAX 方法獲取 JSON 數據。其中 parent_menu 代表父級菜單的 HTML 元素,child_menu 代表子級菜單的 HTML 元素。在父級菜單改變的事件中,我們獲取用戶選擇的值,并將子級菜單清空。然后調用 getJSON 方法,讀取 child_menu_data.json 文件,并根據用戶選擇的父級菜單 ID 展示相應的子級菜單。
JSON 數據格式如下:
{
"1": ["A", "B", "C"],
"2": ["D", "E"],
"3": ["F", "G", "H"],
"4": ["I"],
"5": ["J", "K", "L", "M"]
}
其中,數字代表父級菜單的 ID,其后的數組代表子級菜單的選項。
這樣,我們就可以通過 jQuery 和 JSON 實現一個簡單的二級聯動效果。
上一篇網頁背景 css
下一篇html+++分享代碼