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

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>