JQuery是一種廣泛使用的JavaScript庫(kù)，開(kāi)發(fā)者們用它來(lái)更加輕松優(yōu)雅地開(kāi)發(fā)Web應(yīng)用。而JSON (JavaScript Object Notation) 則是一種輕量級(jí)的數(shù)據(jù)交換格式，是JavaScript語(yǔ)言中獨(dú)立于平臺(tái)的自描述數(shù)據(jù)交換格式。JSON格式的數(shù)據(jù)只有鍵和值，而且鍵必須是一個(gè)字符串。JQuery和JSON的結(jié)合使用實(shí)現(xiàn)了級(jí)聯(lián)聯(lián)動(dòng)功能。下面我們來(lái)詳細(xì)介紹一下這個(gè)過(guò)程。

$(document).ready(function(){
// 聲明一級(jí)下拉列表
$('#first_select').change(function(){
// 通過(guò)Ajax獲取二級(jí)下拉列表數(shù)據(jù)
$.getJSON('/get_second_list/', {'first_id': $(this).val()}, function(data){
// 修改二級(jí)下拉列表的數(shù)據(jù)
var second_select = $('#second_select');
second_select.empty();
second_select.append($('').attr('value', '').text('--請(qǐng)選擇--'));
$.each(data, function(index, value){
second_select.append($('').attr('value', value.id).text(value.name));
});
});
});
// 聲明二級(jí)下拉列表
$('#second_select').change(function(){
// 通過(guò)Ajax獲取三級(jí)下拉列表數(shù)據(jù)
$.getJSON('/get_third_list/', {'second_id': $(this).val()}, function(data){
// 修改三級(jí)下拉列表的數(shù)據(jù)
var third_select = $('#third_select');
third_select.empty();
third_select.append($('').attr('value', '').text('--請(qǐng)選擇--'));
$.each(data, function(index, value){
third_select.append($('').attr('value', value.id).text(value.name));
});
});
});
});

該代碼使用了$.getJSON()函數(shù)來(lái)請(qǐng)求JSON格式的數(shù)據(jù)。通過(guò)這個(gè)函數(shù)我們可以獲取到一級(jí)下拉列表選中的值，然后根據(jù)該值發(fā)起Ajax請(qǐng)求獲取到需要?jiǎng)討B(tài)展示的二級(jí)下拉列表的數(shù)據(jù)，從而完成了一二級(jí)級(jí)聯(lián)。同樣，我們還實(shí)現(xiàn)了二三級(jí)級(jí)聯(lián)。通過(guò)這種方式，我們可以快速動(dòng)態(tài)地改變多個(gè)下拉列表的數(shù)據(jù)內(nèi)容，從而更好地實(shí)現(xiàn)業(yè)務(wù)需求。