要通過jQuery實現下拉菜單的動態加載,您可以遵循以下步驟:
<head>
標簽內添加以下代碼:<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<select>
標簽)和一個用于觸發動態加載內容的按鈕:<select id="dropdown">
<option value="">請選擇</option>
</select>
<button id="loadContent">加載內容</button>
<div>
標簽):<div id="content"></div>
#loadContent
按鈕添加點擊事件。當用戶點擊該按鈕時,從服務器請求數據并將其添加到下拉菜單中:$(document).ready(function() {
// 獲取下拉菜單和按鈕元素
const $dropdown = $('#dropdown');
const $loadContent = $('#loadContent');
// 為按鈕添加點擊事件
$loadContent.on('click', function() {
// 使用AJAX從服務器請求數據(這里以JSON為例)
$.ajax({
url: 'your-server-url', // 替換為您的服務器URL
type: 'GET',
dataType: 'json',
success: function(data) {
// 清空下拉菜單
$dropdown.empty();
// 將數據添加到下拉菜單中
data.forEach(function(item) {
$dropdown.append(`<option value="${item.value}">${item.text}</option>`);
});
},
error: function(error) {
console.log('Error:', error);
}
});
});
});
請注意,您需要將上述代碼中的your-server-url
替換為您自己的服務器URL,并根據您的數據結構調整數據處理部分。
現在,當用戶點擊“加載內容”按鈕時,下拉菜單將從服務器動態加載數據。