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

"output">

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

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

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

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

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

html Copy code "1" selected>Option 1 "2">Option 2 "3">Option 3

• 1
• 2
• 3
• 4
• 5
• 6
• 7

在上面的代码中，我们将第一个选项设置为 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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

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