的Javascript循环通过一个对象来填充HTML选择

Question

我有这样的Java脚本代码：

var LANGS = { 
    "C#": [10, "text/x-csharp"], 
    "C/C++": [7, "text/x-c++src"], 
    "Clojure": [2, "text/x-clojure"], 
    "Java": [8, "text/x-java"], 
    "Go": [6, "text/x-go"], 
    "Plain JavaScript": [4, "text/javascript"], 
    "PHP": [3, "text/x-php"], 
    "Python": [0, "text/x-python"], 
    "Ruby": [1, "text/x-ruby"], 
    "Scala": [5, "text/x-scala"], 
    "VB.NET": [9, "text/x-vb"], 
    "Bash": [11, "text/x-bash"], 
    "Objective-C": [12,"text/x-objectivec"], 
    "MySQL": [13,"text/x-sql"], 
    "Perl": [14, "text/x-perl"], 
} 

我现在我有下面的代码表明，信息警报：

$('#langhelp').on('click', function() { 
      var msg = "These are the languages and their langids: \n[LANGID]: [LANGUAGE]\n"; 
      var langs = []; 
      for (var i in LANGS) { 
       msg += LANGS[i][0] + ": " + i + "\n"; 
      } 
      alert(msg); 
     }); 

但我想要做的是用这个数据填充一个HTML选择，但我不知道如何去做，我已经看过这个question，但没有看到如何将选项附加到select元素。

Answer 1

只需遍历列表并创建选项，然后将它们附加到选择元素。最后，将select附加到期望的容器中。

在我的示例中，我使用$.fn.map遍历项目列表并创建option元素的数组。这个数组（实际上是jQuery数组类对象）然后作为html内容附加到新创建的select元素。

var LANGS = { 
 
    "C#": [10, "text/x-csharp"], 
 
    "C/C++": [7, "text/x-c++src"], 
 
    "Clojure": [2, "text/x-clojure"], 
 
    "Java": [8, "text/x-java"], 
 
    "Go": [6, "text/x-go"], 
 
    "Plain JavaScript": [4, "text/javascript"], 
 
    "PHP": [3, "text/x-php"], 
 
    "Python": [0, "text/x-python"], 
 
    "Ruby": [1, "text/x-ruby"], 
 
    "Scala": [5, "text/x-scala"], 
 
    "VB.NET": [9, "text/x-vb"], 
 
    "Bash": [11, "text/x-bash"], 
 
    "Objective-C": [12,"text/x-objectivec"], 
 
    "MySQL": [13,"text/x-sql"], 
 
    "Perl": [14, "text/x-perl"], 
 
}; 
 

 
var $select = $('<select>', { 
 
    html: $.map(LANGS, function(value, key) { 
 
     return '<option value="' + value[0] + '">' + key + '</option>'; 
 
    }) 
 
}); 
 

 
$select.appendTo('body');

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

Answer 2

这里是你的：

 var LANGS = { 
 
      "C#": [10, "text/x-csharp"], 
 
      "C/C++": [7, "text/x-c++src"], 
 
      "Clojure": [2, "text/x-clojure"], 
 
      "Java": [8, "text/x-java"], 
 
      "Go": [6, "text/x-go"], 
 
      "Plain JavaScript": [4, "text/javascript"], 
 
      "PHP": [3, "text/x-php"], 
 
      "Python": [0, "text/x-python"], 
 
      "Ruby": [1, "text/x-ruby"], 
 
      "Scala": [5, "text/x-scala"], 
 
      "VB.NET": [9, "text/x-vb"], 
 
      "Bash": [11, "text/x-bash"], 
 
      "Objective-C": [12, "text/x-objectivec"], 
 
      "MySQL": [13, "text/x-sql"], 
 
      "Perl": [14, "text/x-perl"], 
 
     } 
 

 
     $.each(LANGS, function(key, keyValue) { 
 
      var option = $('<option />').prop('value', keyValue[0]).text(key); 
 
      $('select').append(option); 
 
     });

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

Answer 3

你也可以尝试这样的事情（纯JS）：

var LANGS = { 
 
    "C#": [10, "text/x-csharp"], 
 
    "C/C++": [7, "text/x-c++src"], 
 
    "Clojure": [2, "text/x-clojure"], 
 
    "Java": [8, "text/x-java"], 
 
    "Go": [6, "text/x-go"], 
 
    "Plain JavaScript": [4, "text/javascript"], 
 
    "PHP": [3, "text/x-php"], 
 
    "Python": [0, "text/x-python"], 
 
    "Ruby": [1, "text/x-ruby"], 
 
    "Scala": [5, "text/x-scala"], 
 
    "VB.NET": [9, "text/x-vb"], 
 
    "Bash": [11, "text/x-bash"], 
 
    "Objective-C": [12,"text/x-objectivec"], 
 
    "MySQL": [13,"text/x-sql"], 
 
    "Perl": [14, "text/x-perl"], 
 
} 
 

 
//create the select element 
 

 
var sel = document.createElement('select'); 
 

 
//foreach key create option element and append to select element 
 
for(key in LANGS){ 
 
    var opt = document.createElement('option'); 
 
    opt.value = key; 
 
    opt.innerHTML = key; 
 
    sel.appendChild(opt); 
 
} 
 

 
//once select is poplulated, append 
 
document.body.appendChild(sel);