jquery 3.0 多級聯(lián)動是一個常見的前端開發(fā)需求,通常應(yīng)用于表單聯(lián)動。以下是一個基于 jquery 3.0 實現(xiàn)的多級聯(lián)動示例代碼:
$(function() { // 一級下拉框 change 事件監(jiān)聽 $("#level1").change(function() { var level1Val = $(this).val(); // 獲取一級下拉框選中項的值 if (level1Val) { // 根據(jù)一級下拉框選中項的值,加載對應(yīng)的二級下拉框數(shù)據(jù) $.ajax({ url: "二級下拉框數(shù)據(jù)接口地址", type: "GET", dataType: "json", data: { level1Val: level1Val }, success: function(data) { var level2Options = ""; // 構(gòu)建二級下拉框選項 for (var i = 0; i< data.length; i++) { level2Options += "" } // 將構(gòu)建好的二級下拉框選項添加到對應(yīng)的下拉框中 $("#level2").html(level2Options); // 觸發(fā)二級下拉框的 change 事件 $("#level2").trigger("change"); } }); } else { // 清空二級下拉框的選項 $("#level2").html(""); // 清空三級下拉框的選項 $("#level3").html(""); } }); // 二級下拉框 change 事件監(jiān)聽 $("#level2").change(function() { var level2Val = $(this).val(); // 獲取二級下拉框選中項的值 if (level2Val) { // 根據(jù)二級下拉框選中項的值,加載對應(yīng)的三級下拉框數(shù)據(jù) $.ajax({ url: "三級下拉框數(shù)據(jù)接口地址", type: "GET", dataType: "json", data: { level2Val: level2Val }, success: function(data) { var level3Options = ""; // 構(gòu)建三級下拉框選項 for (var i = 0; i< data.length; i++) { level3Options += "" } // 將構(gòu)建好的三級下拉框選項添加到對應(yīng)的下拉框中 $("#level3").html(level3Options); } }); } else { // 清空三級下拉框的選項 $("#level3").html(""); } }); });
以上代碼是一個簡單的多級聯(lián)動實現(xiàn),核心思路是通過監(jiān)聽下拉框的 change 事件,根據(jù)當(dāng)前選中項的值加載對應(yīng)的下一級下拉框數(shù)據(jù),并將構(gòu)建好的選項添加到對應(yīng)的下拉框中。代碼中通過 jquery 的 ajax 方法發(fā)送異步請求獲取數(shù)據(jù)。