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

阅读本书更多章节>>>>

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

select 元素的 change 事件是当用户选择了不同的选项时触发的事件。你可以在 select 元素上添加 change 事件的监听器，以便在用户进行选择时执行相应的操作。

change 事件处理函数可以使用 Event.target 属性来获取触发事件的 select 元素，并使用 select.value 属性来获取当前选中的选项的值。

下面是一个示例代码：

<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>

在上面的代码中，我们使用 document.getElementById 方法获取了 select 元素和一个用于输出结果的 div 元素。然后，我们使用 addEventListener 方法在 select 元素上添加了一个 change 事件监听器，当用户选择不同的选项时，就会触发这个事件监听器。

在事件监听器中，我们使用 event.target 属性获取了触发事件的 select 元素，并使用 select.value 属性获取了当前选中的选项的值。根据选项的值，我们执行不同的操作，将结果输出到 output 元素中。

如何在select最开始时未选择时就展现出第一个元素的界面呢

当 select 元素没有选中任何选项时，它将显示一个默认的占位符，通常是第一个选项。如果你想要在 select 元素加载时就显示第一个选项的内容，可以在 HTML 中将该选项设置为 selected。例如：

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

在上面的代码中，我们将第一个选项设置为 selected，这意味着在 select 元素加载时，它将显示第一个选项的内容。

如果你是在使用 JavaScript 动态生成 select 元素，则可以使用 option.selected 属性将第一个选项设置为选中状态。例如：

js

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);

在上面的代码中，我们使用 select.options[0].selected = true 将第一个选项设置为选中状态，然后将 select 元素添加到页面中。这将确保在 select 元素加载时，它将显示第一个选项的内容。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-27/162799.html，文章来源：网络cs，作者：往北，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！