HTML selectedvalue|极客教程

HTML selectedvalue

在HTML中，<select> 元素用于创建下拉列表，用户可以从中选择一个或多个选项。当用户选择一个选项时，可以使用 selected 属性来指定默认选中的选项。而 selectedvalue 则是用来获取或设置下拉列表中当前选中的值。

获取选中的值

要获取下拉列表中当前选中的值，可以通过 selectedvalue 属性来实现。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取选中的值</title>
</head>
<body>
    <select id="mySelect">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <button onclick="getSelectedValue()">获取选中的值</button>

    <script>
        function getSelectedValue() {
            var selectElement = document.getElementById("mySelect");
            var selectedValue = selectElement.value;
            alert("选中的值是：" + selectedValue);
        }
    </script>
</body>
</html>

Output:

HTML selectedvalue

在上面的示例中，我们创建了一个包含三个选项的下拉列表，并将第二个选项设置为默认选中。当用户点击按钮时，会弹出一个提示框显示当前选中的值。

设置选中的值

除了获取选中的值，我们还可以通过 selectedvalue 属性来设置下拉列表中的默认选中值。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>设置选中的值</title>
</head>
<body>
    <select id="mySelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <button onclick="setSelectedValue()">设置选中的值</button>

    <script>
        function setSelectedValue() {
            var selectElement = document.getElementById("mySelect");
            selectElement.value = "3";
        }
    </script>
</body>
</html>

Output:

HTML selectedvalue