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 select，但我不知道该怎么做，我已经看了这个问题，但是看不到如何将选项附加到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);