js 下拉框

作者：望断天涯发布日期:2025-07-09 浏览:41

<!DOCTYPE html>
<html>
<head>
    <title>JS 下拉框示例</title>
</head>
<body>
    <h2>选择一个选项:</h2>
    <select id="mySelect">
        <option value="option1">选项 1</option>
        <option value="option2">选项 2</option>
        <option value="option3">选项 3</option>
        <option value="option4">选项 4</option>
    </select>

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

    <script>
        // 获取下拉框元素
        var selectBox = document.getElementById("mySelect");

        // 添加事件监听器，当选择发生变化时触发
        selectBox.addEventListener('change', function() {
            // 获取选中的值
            var selectedValue = selectBox.value;

            // 将选中的值显示在页面上
            document.getElementById("demo").innerHTML = "你选择了: " + selectedValue;
        });
    </script>
</body>
</html>

解释说明：

HTML 部分:
- 创建了一个包含四个选项的下拉框 (<select> 元素)，每个选项由 <option> 标签定义。
- 还有一个 <p> 标签用于显示用户选择的结果。
JavaScript 部分:
- 使用 document.getElementById 获取下拉框元素，并为其添加一个 change 事件监听器。
- 当用户选择不同的选项时，事件监听器会触发，并通过 selectBox.value 获取当前选中的值。
- 最后，将选中的值显示在页面上的 <p> 标签中。

上一篇：js 自动滚动

下一篇：js label