html select onchange

作者：ー辈ふ只寵你人发布日期:2025-09-09 浏览:46

<!DOCTYPE html>
<html>
<head>
    <title>HTML Select onchange Example</title>
</head>
<body>

<h2>Change the selected option to display a message:</h2>

<select id="mySelect" onchange="myFunction()">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
  <option value="C">Option C</option>
  <option value="D">Option D</option>
</select>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

</body>
</html>

解释说明：

<select> 标签用于创建下拉列表，onchange 属性指定了当用户更改选项时要执行的 JavaScript 函数。
id="mySelect" 为下拉列表设置了一个唯一的标识符，以便在 JavaScript 中引用它。
onchange="myFunction()" 表示当用户选择不同的选项时，会触发 myFunction() 函数。
在 myFunction() 函数中，通过 document.getElementById("mySelect").value 获取当前选中的值，并将其显示在具有 id="demo" 的 <p> 元素中。

上一篇：html 播放器

下一篇：html中ul标签的作用