如何使用jquery＆ajax自動填充html中的選擇框

Question

這是我的HTML代碼（我認為問題出在哪里）：

<form name="County" method= "post" action="post">
<select id= item.county_name name= item.county_name> 
<option value="item.county_name"> County </option>

</select>
</form> 

這是我的javascript：

$.ajax({
url:'http://107.170.75.124/courts/courts.json',
method: 'post'
})
.done (function(data){
   data.forEach(function(item){
    console.log (item.county_name);
     $ ('select'). append ('<option value="' + item.county_name + '">' + 
'</option>');


})
}); 

當我嘗試運行它時，下拉框顯示它們應該是縣的所有100個區域，但它們是空白的。 所以我的猜測是，HTML存在問題，導致HTML無法顯示。 所有縣都出現在我的控制台中

Answer 1

您忘記提供<option>元素的實際顯示值。 你的<option>元素就像這樣清盤：

<option value='ajax result item here'></option>

<option>元素為空。

將行更改為：

 $ ('select').append('<option value="' + 
     item.county_name + '">' + item.county_name + '</option>');

或者，這只是（因為當沒有值上明確設置的option ，價值成為的顯示的文本option ）：

 $ ('select').append('<option>' + item.county_name + '</option>');

Answer 2

"value"參數只設置選項的值，但不是它的標簽。 標簽需要位於<option>標簽之間

您的代碼不完整。

$ ('select').append('<option value="' + item.county_name + '">' + '</option>');

結果是這樣的

<option value="somecountry"></option>

你需要改變它：

$ ('select').append ('<option value="' + item.county_name + '">' + item.county_name + '</option>');

哪個應該輸出

<option value="somecountry">somecountry</option>