使用JS添加select> option作为列表项

Question

我有一个按钮，上面写着“添加顶部”，当按下它时，必须出现一个包含某些值标签的新选择标签。 我差不多做了，但是当我按下按钮时，标签出现并立即消失。 怎么了？

HTML：

      <div class="form-group" id='add_one'>
        <br>
        <h5>You can add up to 3 toppings to your pizza!</h5>
        <ol id="list"></ol>
        <button class="btn btn-primary" id="add">Add topping</button>
      </div>

JS：

var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies',
  'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms'];

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#add').onclick = () => {

    const topping = document.createElement('select', {
      'name': 'Topping',
      'class': 'form-control'
    });
    list.appendChild(topping);
    toppings.forEach(function(item, i, arr) {
      const ch_topping = document.createElement('option');
      ch_topping.innerHTML += item;
      topping.appendChild(ch_topping);
    });
  };
});

 var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies', 'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms']; document.addEventListener('DOMContentLoaded', () => { document.querySelector('#add').onclick = () => { const topping = document.createElement('select', { 'name': 'Topping', 'class': 'form-control' }); list.appendChild(topping); toppings.forEach(function(item, i, arr) { const ch_topping = document.createElement('option'); ch_topping.innerHTML += item; topping.appendChild(ch_topping); }); }; }); 

 <div class="form-group" id='add_one'> <br> <h5>You can add up to 3 toppings to your pizza!</h5> <ol id="list"></ol> <button class="btn btn-primary" id="add">Add topping</button> </div> 

Answer 1

正如@brk所说，

删除document.addEventListener('DOMContentLoaded', () => {/* ... */}将解决您的问题， 并且您无需修改​​任何HTML代码。

但是我建议使用document.getElementById因为document.querySelector()更通用，与document.getElementById相比，性能可能更差

在此处检查性能差异

---

我已经对您的代码进行了一些更改，因为它附加了3个以上的下拉菜单，您可以随时对其进行更改

 var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies', 'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms' ]; var appended = 0; var maxAppended = 3; document.getElementById('add').onclick = () => { appended+=1; if(appended <= maxAppended){ const topping = document.createElement('select', { 'name': 'Topping', 'class': 'form-control' }); list.appendChild(topping); toppings.forEach(function(item, i, arr) { const ch_topping = document.createElement('option'); ch_topping.innerHTML += item; topping.appendChild(ch_topping); }); } else { /* Your logic goes here*/ } }; 

 <div class="form-group" id='add_one'> <h5>You can add up to 3 toppings to your pizza!</h5> <ol id="list"> </ol> <button class="btn btn-primary" id="add">Add topping</button> </div> 

Answer 2

按钮默认类型为submit将其更改为button type='button' 。

另外document.addEventListener('DOMContentLoaded',如果在dom准备就绪后加载脚本document.addEventListener('DOMContentLoaded',则可能不需要document.addEventListener('DOMContentLoaded',

 var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies', 'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms' ]; document.querySelector('#add').onclick = () => { const topping = document.createElement('select', { 'name': 'Topping', 'class': 'form-control' }); list.appendChild(topping); toppings.forEach(function(item, i, arr) { const ch_topping = document.createElement('option'); ch_topping.innerHTML += item; topping.appendChild(ch_topping); }); }; 

 <div class="form-group" id='add_one'> <br> <h5>You can add up to 3 toppings to your pizza!</h5> <ol id="list"></ol> <button type="button" class="btn btn-primary" id="add">Add topping</button> </div>