使用JSON數據在HTML中填充下拉列表

Question

我是一名學生，對代碼非常陌生。 我使用HTML和CSS創建了一個下拉列表，並嘗試使用JSON中的數據填充該列表。 這是我的HTML代碼：

    <div class="dropdown">
  <button class="dropbtn">Choose your area</button>
  <div class="dropdown-content">
    <a href="#">Place 1</a>
    <a href="#">Place 2</a>
    <a href="#">Place 3</a>

  </div>
</div>

我正在嘗試將“ Place 1”，“ Place 2”等替換為大約150個真實的地名。 這些在JSON中：

    "areaNames": [
 {
   "A": 1,
   "B": "Barking & Dagenham"
 },
 {
   "A": 2,
   "B": "Barnet"
 },

等等。 如何從JSON中提取地名，以使其位於“ Place 1”，“ Place 2”等位置？ 我已經嘗試按照建議來響應類似的教程，但這似乎給了我幾個單獨的下拉框的列表，而不是簡單的位置列表。

謝謝你的幫助。

Answer 1

這是純JS的工作示例。

 var areaNames = [ { "A": 1, "B": "Barking & Dagenham", "C": "https://google.com" }, { "A": 2, "B": "Barnet", "C": "https://google.com" } ] var dropdownContent = document.querySelector('.dropdown-content'); for (i = 0; i < areaNames.length; i++) { var element = areaNames[i]; var htmlToAppend = document.createElement('a'); htmlToAppend.innerHTML = element.B; htmlToAppend.href = element.C; dropdownContent.appendChild(htmlToAppend); }

 a { display: block; }

 <div class="dropdown"> <button class="dropbtn">Choose your area</button> <div class="dropdown-content"> </div> </div>

Answer 2

我沒有在代碼中看到下拉菜單。

您可以使用jQuery （這是一個Javascript庫）來實現您的目標。

HTML：

<select id="sel">

</select>

JavaScript：

$(function() {
    var data = [
        {
        "id": "1",
        "name": "test1"},
    {
        "id": "2",
        "name": "test2"}
    ];
    $.each(data, function(i, option) {
        $('#sel').append($('<option/>').attr("value", option.id).text(option.name));
    });
})

Answer 3

我相信您已經在DOM中加載了JSON數據，因此可以訪問JavaScript中的數據。 您是否在使用任何JavaScript庫或框架，例如jQuery，AngularJS或純Javascript？ 最好將外部的javascript代碼組織在擴展名為.js的文件中，並使用<head>或<body>部分中的<script>標記將其加載到HTML中。

在HTML中動態生成定位標記的步驟：

將數據從JSON獲取到DOM對象（javascript）
創建/跟蹤將包含選項的父HTML元素。 將此引用保留在變量中。
迭代到從JSON訪問的數據數組（或對象）中
獲取每次迭代中相關屬性的值
創建將與每個數據值重復使用的HTML元素。 在這種情況下，模板應為“值”
將此生成的代碼附加到上面＃2中存儲的父元素中。
迭代完成后，在適當的位置將父元素注入（附加）到DOM中。

情況1：純JavaScript-

使用XHR讀取JSON並將數據放入變量中。 讓我們將其命名為JSONData。

我們將保留在javascript中HTML中創建的父元素的引用。

//希望您只有一個元素與此類名或

//有關的元素是此HTML代碼中此類名稱的第一個元素。

///通常，作為一種好的做法，我們應該使用ID來在我們的javascript代碼中分別標識一個元素，

//否則使用特定的標識符。

var parentDropdownContainer = document.getElementsByClassName（'dropdown-content'）[0];

迭代JSON數據

for (var counter = 0, len = JSONData.length - 1; counter < len; counter ++){
  //we will add logic to generate HTML
}

您可以使用迭代的其他變體-用於Array.splice（）等，直到您理解為止。

在此迭代器中，我們需要創建一個HTML代碼並將其附加到父容器中

for (var counter = 0, len = JSONData.length - 1; counter < len; counter ++){
  var currentData = JSONData[counter]; //this holds the reference of the current data in this iteration
  var dropdownElement = document.createElement('a');
  dropdownElement.setAttribute('href','#'); //this adds the href attribute into the anchor element.
  //lets add another attribute to the anchor element to represent the dynamic id/value associated with this data
  dropdownElement.setAttribute('data-value',currentData.A);
  //lets add the value inside the anchor element
  dropdownElement.innerHTML = currentData.B;
  //lets append this element to the parent container
  parentDropdownContainer.appendChild(dropdownElement);
}

現在，這應該在下拉菜單中呈現所需的動態選項。

使用JSON數據在HTML中填充下拉列表

問題描述

3 個解決方案

解決方案1
1 2017-04-02 08:50:53

解決方案2
0 2017-04-02 08:38:09

解決方案3
0 2017-04-02 09:43:50

使用JSON數據在HTML中填充下拉列表

問題描述

3 個解決方案

解決方案1 1 2017-04-02 08:50:53

解決方案2 0 2017-04-02 08:38:09

解決方案3 0 2017-04-02 09:43:50

解決方案1
1 2017-04-02 08:50:53

解決方案2
0 2017-04-02 08:38:09

解決方案3
0 2017-04-02 09:43:50