在前端開發中,經常需要把數據轉成JSON格式,方便進行數據傳輸及處理。而使用HTML5中的Datalist,可以很方便地把一組下拉選項轉成JSON對象。
Datalist是HTML5中的新元素,用于為輸入框提供自動完成功能。Datalist包含一組option元素,用戶可以通過下拉菜單選擇其中一個選項。
<input list="options"> <datalist id="options"> <option value="選項1"></option> <option value="選項2"></option> <option value="選項3"></option> </datalist>
上面的代碼就是一個簡單的Datalist示例,為一個文本輸入框提供了三個選項。接下來我們要將這些選項轉成JSON格式。
var options = document.getElementById('options').options; var json = []; for (var i=0; i<options.length; i++) { var option = { value: options[i].value, label: options[i].label }; json.push(option); } console.log(JSON.stringify(json));
上面的代碼通過獲取datalist元素的options,循環遍歷每個選項,將value和label屬性保存到一個對象中,再將對象添加到一個數組中。最后使用JSON.stringify將數組轉成JSON字符串。
使用Datalist轉成JSON格式可以提高數據傳輸和處理的效率,同時也方便后臺開發人員進行數據解析。