的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);