簡體   English   中英

Javascript遍歷對象以填充HTML選擇

[英]Javascript looping through an object to populate an HTML select

我有這個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元素。

只需遍歷列表並創建選項,然后將其附加到選擇元素即可。 最后,將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> 

這是你的:

  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> 

您還可以嘗試這樣的操作(普通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); 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM