html select设置选中项

作者：尒忸旳迣鎅゛沬卜鋽旳凄涼发布日期:2025-10-25 浏览:29

<!DOCTYPE html>
<html>
<head>
    <title>HTML Select 设置选中项</title>
</head>
<body>
    <h2>选择您的水果</h2>
    <form>
        <label for="fruits">请选择一种水果:</label>
        <select id="fruits" name="fruits">
            <option value="apple">苹果</option>
            <option value="banana" selected>香蕉</option>
            <option value="orange">橙子</option>
            <option value="grape">葡萄</option>
        </select>
    </form>

    <p>在上面的下拉菜单中，"香蕉"被设置为默认选中项。</p>

    <script>
        // 如果需要通过 JavaScript 动态设置选中项
        document.getElementById('fruits').value = 'orange';
    </script>
</body>
</html>

解释说明：

HTML <select> 标签：用于创建下拉列表。
<option> 标签：定义下拉列表中的选项。每个选项都有一个 value 属性，表示该选项的值。
selected 属性：可以添加到 <option> 标签中，以指定某个选项为默认选中项。在示例中，<option value="banana" selected> 表示 "香蕉" 是默认选中项。
JavaScript 动态设置选中项：通过 document.getElementById('fruits').value = 'orange'; 可以动态地将选中项设置为 "橙子"。

如果你需要进一步了解或有其他问题，请告诉我！

上一篇：html图标

下一篇：html文字加粗