下拉框js

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

#myDropdown {
  width: 200px;
  padding: 8px;
  font-size: 16px;
}

document.getElementById('myDropdown').addEventListener('change', function() {
  alert('You selected: ' + this.value);
});

document.addEventListener('DOMContentLoaded', function() {
  var dropdown = document.getElementById('myDropdown');
  // 动态添加选项
  var newOption = document.createElement('option');
  newOption.value = 'option4';
  newOption.text = 'Option 4';
  dropdown.add(newOption);
});

/* 确保选择器正确 */
#myDropdown {
  /* 样式代码 */
}

/* 使用通用样式解决兼容性问题 */
select {
  -webkit-appearance: none; /* 移除默认样式 */
  -moz-appearance: none;
  appearance: none;
}

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