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元素。最后，将select附加到所需的容器中。

在我的示例中，我使用$.fn.map迭代项列表并创建option元素数组。然后将此数组（实际上它是类似jQuery数组的对象）作为html内容附加到新创建的select元素。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

这是你的：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

＆＃13;

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

循环访问对象以填充HTML选择的Javascript

3 个答案: