如何使用 JS fetch() 使用 JSON 值列表填充 select 下拉列表？

Question

在下面的代碼段中，我嘗試使用獲取請求在 select 下拉列表中填充狀態列表。 我可以從本地 json 文件中控制狀態列表。

我能夠正確控制狀態列表，但是 select 菜單根本沒有填充？ 我沒有看到任何錯誤，我想知道我哪里出錯了？

我的 fetch 請求在語法上有什么問題嗎？

 const states = document.getElementById('states'); states.innerHTML = '<option value="" disabled selected>Select State</option>'; fetch('https://jarednewnam.com/test/states.json').then(res => res.json()).then(res => { if (res.status) { res.data.forEach(state => { const option = document.createElement('option'); option.value = state.abbr; let node = document.createTextNode(state.state) option.appendChild(node); states.appendChild(option); }); } });

 <select name="states" id="states"></select>

Answer 1

您應該 append 選項到 select 元素，缺少代碼states.appendChild(option);

 const states = document.getElementById('states'); states.innerHTML = '<option value="" disabled selected>Select State</option>'; fetch('https://jarednewnam.com/test/states.json').then(res => res.json()).then(res => { console.log(res) if (res.status) { res.data.forEach(state => { const option = document.createElement('option'); option.value = state.abbr; option.innerHTML = state.state; states.appendChild(option); }); } });

 <select name="states" id="states"></select>

Answer 2

我的 fetch 請求在語法上有什么問題嗎？

你的獲取沒有錯。

您缺少的是在 forEach 循環中附加您正在創建的節點。
這是一個示例，我正在使用 typicode 獲取某些內容的列表，因為您使用的 api 沒有通過瀏覽器 cors 預檢 SO，但我認為您應該明白這一點：

 const states = document.getElementById('states'); states.innerHTML = '<option value="" disabled selected>Select State</option>'; fetch('https://jsonplaceholder.typicode.com/todos').then(res => res.json()).then(res => { console.log(res) res.forEach(state => { const option = document.createElement('option'); option.value = state.id; option.innerHTML = state.title; states.append(option) }); });

 <select name="states" id="states"></select>

Answer 3

 let statesSelect = document.getElementById('states'); let newDefault = new Option('Select State', null, true, true) newDefault.disabled = true statesSelect.add(newDefault) fetch("https://jarednewnam.com/test/states.json").then((res) => res.json()).then((data) => { const { states } = data; states.forEach((state) => { let option = new Option(state.name, state.abbreviation); //idk the right way you want to display it recommend looking at the docs for this. statesSelect.add(option); }); }); let todos = document.getElementById('placeholder'); let newDefault1 = new Option('Select todo', null, true, true) newDefault1.disabled = true todos.add(newDefault1) fetch('https://jsonplaceholder.typicode.com/todos').then(res => res.json()).then(data => { data.forEach(todo => { let option = new Option(todo.title, todo.id) //idk the right way you want to display it recommend looking at the docs for this. console.log(option) todos.add(option) }); });

 <select name="states" id="states"></select> <p>your select</p> <select name="placeholder" id="placeholder"></select> <p>placeholder data</p>

這應該可行，並且在我看來比使用 DOM 操作函數更干凈。