如何使用 For 循环在 JQuery 中制作多个 HTML 标签？

Question

我正在尝试使用 JQuery 创建一个动态选项列表，尽管当我运行代码时，n 个选项标签中只有一个选项标签（n 是任何正整数）。这是一个示例数组：

我的代码：

$.getJSON('http://localhost:3006/search', function(data){
   alert(data.names.length);
   var i;
   var arrLen = data.names.length; //In this case, the names array up top
   for(i = 3; i < arrLen; i++){
      $('#name').append($('<option></option>').text(data.names[i][0]).val(data.names[i][0]));
   }
});

我一直在获取数组中的最后一个选项标签，但没有别的...

Answer 1

这里有一些问题。首先，主要问题是你在循环中设置了 i = 3，所以你从数组的第 4 个元素开始，而不是第一个。

其次，正确的 jQuery 方法是 val()，而不是 value()，并且您需要在第一个 append() 上使用 text() 链接该调用，不创建两个单独的 option 元素。试试这个：

let data = {
  names: ['John Doe', 'Jane Doe', 'Stephan Doe', 'Emily Doe']
}

// in your AJAX callback:
for (var i = 0; i < data.names.length; i++) {
  $('#name').append($('<option></option>').text(data.names[i]).val(data.names[i]));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="name"></select>

另外请注意，您可以通过使用 map() 创建一个 HTML 字符串数组来附加到 DOM 一次而不是创建一个品牌来提高代码的性能在循环的每次迭代中附加到 DOM 的新 jQuery 对象：

let data = {
  names: ['John Doe', 'Jane Doe', 'Stephan Doe', 'Emily Doe']
}

// in your AJAX callback:
let options = data.names.map(n => `<option value="${n}">${n}</option>`);
$('#name').append(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="name"></select>

Answer 2

这是我的代码。希望对你有帮助
HTML 部分：-

<select id="main"></select>

JS 部分：-

$(document).ready(function(){
  let main = $("#main");
  let optionText = ['Option1','Option2','Option3'];

  optionText.forEach(index => {
    let html = `<option>${index}</option>`;
    main.append(html);
  });
});

如何使用 For 循环在 JQuery 中制作多个 HTML 标签？

How Would I Make Multiple HTML Tags In JQuery Using a For Loop?

html

javascript

jquery

dynamic