如何设置HTML select下拉框的默认值？

HTML select下拉框

在网页中，我们通常需要为用户提供选项列表，以供用户选择。而HTML select下拉框就是一种常用的选项列表，用户可以通过点击下拉框按钮，在列表中选择自己需要的选项。

HTML Select基本语法

HTML select下拉框使用<select>标签来定义，其中<option>标签用于定义下拉框的选项。

    <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        ...
    </select>

可以看到，<option>标签的value属性定义了选项的值，而标签内的内容则是选项的显示文字。

设置默认值

如果我们需要在下拉框中设置默认选项，可以使用selected属性来指定默认选项。

    <select>
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3">Option 3</option>
        ...
    </select>

上面的代码中，<option>标签中的selected属性指定了默认选项，其值可以为selected或者selected="selected"。

使用JavaScript设置默认值

除了在HTML代码中指定默认选项，我们还可以使用JavaScript动态设置默认选项。我们可以在HTML代码中为<select>标签指定一个id属性或者class属性，然后使用JavaScript代码来设置默认选项。

    <select id="mySelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        ...
    </select>
    <script>
        document.getElementById("mySelect").value = "2";
    </script>

上面的代码中，首先我们为<select>标签指定了一个id属性，然后使用JavaScript代码document.getElementById("mySelect").value = "2";来将默认选项设置为第二个选项。

总结

本文我们介绍了如何在HTML select下拉框中设置默认选项，其中包括在HTML代码中指定默认选项和使用JavaScript动态设置默认选项。不同的场景下可以选择不同的方式来设置默认选项。