for循环动态输出结果

Question

我想知道如何使用for循环动态输出结果，但我没有尝试过，但是有什么想法呢？

              <select class="form-control">
                for (i = 0; i < 5; i++) {
                <option> ACS40 + i +  </option>;

                <option>ACS401</option>
                <option>ACS402</option>
                <option>ACS403</option>
                <option>ACS404</option>
                <option>ACS405</option>
                <option>ACS406</option>
                }
              </select>

Answer 1

您可以使用for循环和Template Strings。然后在每个循环中，使用string

将innerHTML添加到<select>的{​​{1}}中

+=

let sel = document.querySelector('.form-control');
for (i = 0; i < 5; i++) {
  sel.innerHTML += `<option>ACS40${i} </option>`
}
 

Answer 2

Vanilla Javascript

使用.querySelectorAll()选择元素，然后使用.innerHTML通过javascript修改html。

var select = document.querySelectorAll('.form-control')[0];

for (i = 0; i < 5; i++) { 
  select.innerHTML += `<option> ACS40${i}</option>`;
}

<select class="form-control">

</select>

jQuery

或者您可以使用如下所示的jQuery。这段代码使用jQuery selectors选择元素，并使用.append()修改html

var select = $(".form-control");

for (i = 0; i < 5; i++) { 
  select.append(`<option> ACS40${i}</option>`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control">

</select>

Answer 3

这是另一种方法。

let sel = document.getElementById('test');

for(let i = 0; i < 5; i++){
  sel.appendChild(createOpt("ASBLA 40"+ i));
}

function createOpt(content){
  let el = document.createElement("option");
  el.innerHTML = content;
  return el;
}

<div>
 <select id="test">
 </select>
</div>

Answer 4

您可以尝试使用JavaScript方式创建(30,30)和相应的select元素，

option

var myDiv = document.getElementById('form');

//Create and append select list
var selectList = document.createElement("select");
selectList.class = "form-control";
myDiv.appendChild(selectList);

//Create and append the options
for (var i = 0; i < 5; i++) {
  var content = "ACS40" + i;
  var option = document.createElement('option');
  option.setAttribute("value", content);
  option.text = content;
  selectList.appendChild(option);
}