js中select选择器的change事件处理函数详解

<select id="my-select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
<div id="output"></div>
<script>
const select = document.getElementById('my-select');
const output = document.getElementById('output');
// 添加 change 事件监听器
select.addEventListener('change', event => {
  // 获取当前选中的选项的值
  const selectedValue = event.target.value;
  // 根据选项的值执行不同的操作
  if (selectedValue === 'option1') {
    output.textContent = 'You selected option 1';
  } else if (selectedValue === 'option2') {
    output.textContent = 'You selected option 2';
  } else if (selectedValue === 'option3') {
    output.textContent = 'You selected option 3';
  } else {
    output.textContent = 'Unknown option';
  }
});
</script>

<select>
  <option value="1" selected>Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

const select = document.createElement('select');
// 添加选项
const option1 = document.createElement('option');
option1.value = '1';
option1.text = 'Option 1';
select.appendChild(option1);
const option2 = document.createElement('option');
option2.value = '2';
option2.text = 'Option 2';
select.appendChild(option2);
const option3 = document.createElement('option');
option3.value = '3';
option3.text = 'Option 3';
select.appendChild(option3);
// 将第一个选项设置为选中状态
select.options[0].selected = true;
// 将 select 元素添加到页面中
document.body.appendChild(select);