javascript - 从存储在变量中的选项创建选择框

Question

我想根据存储在变量中的选项创建一个选择框(值会根据用户而改变)。

现在，我只是想让它在我的 javascript 文件中使用这个变量:

  var resp = {"streams": [ {"sweet":"cookies"}, {"savory":"pizza"}]}

在 html 文件中，我有一个选择 ID“selectedStream”

我如何调用来自 html 的选择 ID 和来自 javascript 的变量来创建选择框？

我看过如下示例，但我不明白如何将 id 和变量链接到框。

  $("option:selected", myVar).text()

我希望这是连贯的!谢谢

Answer 1

我认为您正在尝试做的是将选项 html 节点附加到屏幕上现有的选择元素，其 id 为“selectedStream”。您希望使用“resp”变量中的数据来填充要附加的选项节点的文本和值。如果这是正确的，我已经使用 this 实现了该功能jsfiddle。 javascript也在下面:

$(function(){
   var resp = {"streams": [ {"sweet":"cookies", "savory":"pizza"}]};
   var streamData = resp.streams[0];
   var optionTemplate = "<option value=\"{0}\">{1}</option>";
   for(var key in streamData){
       var value =  streamData[key];
       var currentOptionTemplate = optionTemplate;
       currentOptionTemplate = currentOptionTemplate.replace("{0}", key);
       currentOptionTemplate = currentOptionTemplate.replace("{1}", value);
       $("#selectedStream").append($(currentOptionTemplate));
   }
});