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代码通常（虽然并不总是）知道已经出现的剧集编号，该编号映射到＆＃34; Episode＆＃34; json中的数据元素。当我知道这一集时，我想在选择中预先选择该选项。如果我不知道，不要预先选择。在所有情况下，我想为每条记录创建一个选项。这必须在js中动态发生，因为在用户输入一些数据之前，我无法取回这个json。

我让ajax调用全部工作，我只需要知道如何动态添加选项绑定到该数据的选项，然后在我知道剧集时自动选择一个选项。

一个纯粹的jquery解决方案是理想的，但我也很满意js。

怎么做？（谢谢！）

注意：这不是this post的副本。在我的问题中，绑定到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);
}

动态构建html select from json + select option

3 个答案: