我的下拉列表未动态选择

<select id="myDropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<script>
document.getElementById('myDropdown').addEventListener('change', function() {
  console.log('Selected:', this.value);
});
</script>

function updateDropdown(options) {
  var dropdown = document.getElementById('myDropdown');
  dropdown.innerHTML = ''; // 清空现有选项
  options.forEach(function(option) {
    var opt = document.createElement('option');
    opt.value = option.value;
    opt.innerHTML = option.text;
    dropdown.appendChild(opt);
  });
}

// 使用示例
updateDropdown([
  {value: 'newOption1', text: 'New Option 1'},
  {value: 'newOption2', text: 'New Option 2'}
]);

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    updateDropdown(data.options);
  })
  .catch(error => console.error('Error:', error));

/* 确保没有隐藏下拉列表的样式 */
#myDropdown {
  display: block; /* 或 inline-block */
}