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