Javascript 遍历对象以填充 HTML select

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 我不知道该怎么做，我看过这个 question 但是看不到如何将选项附加到 select 元素。

Answer 1

只需遍历列表并创建选项，然后将它们附加到 select 元素。最后，将 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);

Javascript 遍历对象以填充 HTML select

Javascript looping through an object to populate an HTML select

html

javascript

jquery

drop-down-menu