動態從json +選擇選項構建HTML選擇

Question

我有一個jquery ajax調用，它將回拉json數據，例如：

{  
   "Title":"The Office",
   "Season":"1",
   "totalSeasons":"9",
   "Episodes":[  
      {  
         "Title":"Pilot",
         "Released":"2005-03-24",
         "Episode":"1",
         "imdbRating":"7.6",
         "imdbID":"tt0664521"
      },
      {  
         "Title":"Diversity Day",
         "Released":"2005-03-29",
         "Episode":"2",
         "imdbRating":"8.3",
         "imdbID":"tt0664514"
      },
      {  
         "Title":"Health Care",
         "Released":"2005-04-05",
         "Episode":"3",
         "imdbRating":"7.9",
         "imdbID":"tt0664517"
      },
   ],
   "Response":"True"
}

從該數據，我希望建立綁定到它的html選擇。 例如：

<select>
  <option value="tt0664521">Pilot - Episode 1</option>
  <option value="tt0664514">Diversity Day - Episode 2</option>
  <option value="tt0664517">Health Care - Episode 3</option>
</select>

我的js代碼將經常（盡管並非總是）知道情節編號，該情節編號映射到json中的“ Episode”數據元素。 當我知道情節時，我想在選擇中預先選擇該選項。 如果我不知道，則無需預先選擇。 在所有情況下，我都想為每個記錄創建一個選項。 這必須在js中動態發生，因為在用戶輸入一些數據之前，我將無法取回此json。

我已經使ajax調用全部正常工作，我只需要知道如何向綁定到該數據的選擇中動態添加選項，然后在知道該情節時自動選擇一個選項。

一個純jquery解決方案將是理想的選擇，但我也對js感到滿意。

怎么做？ （謝謝！）

注意：這不是此文章的重復。 在這里我的問題是，綁定到json數據是難題的關鍵。

Answer 1

您必須結合使用$.each方法和append 。

$.each方法表示一個通用的迭代器函數，該函數接受一個回調函數。

append用於將參數指定的內容插入到匹配元素集中每個元素的末尾。

另外，我使用map方法來創建選擇選項數組。

let selectOptions=obj.Episodes.map(function(episode){
    return {"value": episode.imdbID,"name":episode.Title+' - '+' Episode '+episode.Episode};
});

這是整個解決方案：

 let obj={ "Title":"The Office", "Season":"1", "totalSeasons":"9", "Episodes":[ { "Title":"Pilot", "Released":"2005-03-24", "Episode":"1", "imdbRating":"7.6", "imdbID":"tt0664521" }, { "Title":"Diversity Day", "Released":"2005-03-29", "Episode":"2", "imdbRating":"8.3", "imdbID":"tt0664514" }, { "Title":"Health Care", "Released":"2005-04-05", "Episode":"3", "imdbRating":"7.9", "imdbID":"tt0664517" }, ], "Response":"True" } let selectOptions=obj.Episodes.map(function(episode){ return {"value": episode.imdbID,"name":episode.Title+' - '+' Episode '+episode.Episode}; }); let select=$('<select>'); $.each(selectOptions,function(index, item){ select.append('<option value="'+item.value+'">'+item.name+'</option>'); }); $('body').append(select); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

為了專門創建列表：

//Create an empty array.
var list = [];

//Add each option from JSON to the list array
$.each(jsonData, function (key, value) {
    list.push(key);
});

//For every option in the list, add it into the select menu
$.each(list, function (key, value) {
    $("#my-select-element").append("<option value='" + value + "'>" + value + "</option>");
});

Answer 3

Javascript ES5解決方案。 不要忘了給您的選擇（“ my_select”）提供一個ID：

var data = {
  "Title": "The Office",
  "Episodes": [
    {
      "Title": "Pilot",
      "Episode": "1",
      "imdbID": "tt0664521",
      //...
    },
    //...
  ]
};

var list = data['Episodes'];
var sel = document.getElementById('my_select');
for(var i = 0; i < list.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = list[i]['Title'] + ' - Episode ' + list[i]['Episode'];
    opt.value = list[i]['imdbID'];
    sel.appendChild(opt);
}