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>

我试图替换“地点1＆＃39;”，“地点2＆＃39;等约有150个真实地名。这些是JSON：

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

等等。如何将地址名称从JSON拉到位于＆＃39;地点1＆＃39;，＆＃39;地点2＆＃39;等等？我已经尝试按照建议回应类似的教程，但这似乎给了我一个单独的下拉框的列表，而不是一个简单的地方列表。

感谢您的帮助。

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的文件中，并使用<script>或<head>部分中的<body>标记将其加载到您的HTML中。

在HTML中动态生成锚标记的步骤：

从JSON获取数据到DOM对象（javascript）
创建/跟踪包含选项的父HTML元素。将此引用保留在变量中。
迭代进入从JSON
获取每次迭代中相关属性的值
创建将与每个数据值重复使用的HTML元素。在这种情况下，模板应该是＆＃39; value＆＃39;
将此生成的代码附加到上面＃2中存储的父元素中。
迭代完成后，将父元素注入（追加）到适当位置的DOM中。

案例1：简单的javascript -

使用XHR读取JSON并将数据转换为变量。让我们将其命名为JSONData。

我们将在javascript中保留HTML中创建的父元素的引用。

//希望您只有一个具有此类名的元素或

// related元素是此HTML代码中此类名的第一个元素。

//通常，作为一种好的做法，我们应该使用ID在我们的javascript代码中单独标识元素，

//否则使用相同的特定标识符。

var parentDropdownContainer = document.getElementsByClassName（＆＃39; dropdown-content＆＃39;）[0];

迭代JSON数据

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

您可以使用迭代的其他变体 - 对于in，while，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 个答案: