动态JavaScript表单中区块内嵌入下拉菜单失效问题

问题出在你创建了下拉选择框newSelect后，没有将它添加到DOM结构中，所以不会被渲染显示。

修改后的完整代码：

document.getElementById('addVegetablesButton').addEventListener('click', function() {
  var newSection = document.createElement('fieldset');
  var legend = document.createElement('legend');
  legend.textContent = 'Vegetable';

  var newField1 = document.createElement('input');
  newField1.type = 'number';
  newField1.name = 'sectionField1';
  newField1.placeholder = 'Quantity';
    
  var newField2 = document.createElement('label');
  newField2.textContent = 'Vegetable type:';

  var newSelect = document.createElement('select');
  newSelect.name = 'dynamicSelect';

  var option1 = document.createElement('option');
  option1.value = 'option1';
  option1.textContent = 'Carrot';

  var option2 = document.createElement('option');
  option2.value = 'option2';
  option2.textContent = 'Brussel Sprout';

  newSelect.appendChild(option1);
  newSelect.appendChild(option2);
    
  newSection.appendChild(legend);
  newSection.appendChild(newField1);
  newSection.appendChild(newField2);
  // 新增这一行，将下拉框添加到区块中
  newSection.appendChild(newSelect);
  document.getElementById('dynamicForm').appendChild(newSection);
});

核心修改点：

• 在添加标签newField2之后，调用newSection.appendChild(newSelect)，把创建好的下拉选择框追加到表单区块内，这样它就会和其他元素一起被渲染出来。

内容的提问来源于stack exchange，提问作者user23510612