Javascript 循环遍历对象以填充 HTML 选择答案

【问题标题】：Javascript looping through an object to populate an HTML selectJavascript 循环遍历对象以填充 HTML 选择
【发布时间】：2015-06-27 08:46:20
【问题描述】：

我有这个 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 但看不到如何将选项附加到选择元素。

【问题讨论】：

你想在什么时候填充选择框？
选项的标签和值应该是什么，会用text/x-csharp吗？
对不起，名字应该是"C#"，值是"10"等等……text/****并不重要

标签： javascript jquery html drop-down-menu

【解决方案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');

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);

【讨论】：