jquery ajax級聯菜單是一種常見的前端開發技術。它可以讓你動態地加載下拉菜單,例如省市區三級聯動。
$(document).ready(function(){ //省份下拉菜單改變觸發事件 $("#province").change(function(){ var province = $("#province").val(); //獲取選中的省份 //ajax請求獲取對應城市列表 $.ajax({ url: "getCityList.php", //請求處理腳本 type: "post", //提交方式 dataType: "json", //返回數據格式 //傳遞的參數 data: { province: province }, success: function(data){ //清空城市下拉菜單 $("#city").empty(); //遍歷城市列表,添加到下拉菜單 for (var i = 0; i< data.length; i++) { var option = $(""); $("#city").append(option); } //級聯刷新區域下拉菜單 $("#city").trigger("change"); } }); }); //城市下拉菜單改變觸發事件 $("#city").change(function(){ var city = $("#city").val(); //獲取選中的城市 //ajax請求獲取對應區域列表 $.ajax({ url: "getDistrictList.php", //請求處理腳本 type: "post", //提交方式 dataType: "json", //返回數據格式 //傳遞的參數 data: { city: city }, success: function(data){ //清空區域下拉菜單 $("#district").empty(); //遍歷區域列表,添加到下拉菜單 for (var i = 0; i< data.length; i++) { var option = $(""); $("#district").append(option); } } }); }); });
上面的代碼是一個基本的jquery ajax級聯菜單實現。當省份下拉菜單改變時,會向服務器請求對應城市列表,清空城市下拉菜單并添加新的選項。當城市下拉菜單改變時,會向服務器請求對應區域列表,清空區域下拉菜單并添加新的選項。