Home >Web Front-end >HTML Tutorial >How to set the default value of HTML select drop-down box?
This article introduces how to set the default value of the select drop-down box. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
We can set the default value of the select element using the "selected" attribute on the desired option, which is a boolean attribute.
By default, the option tag with the "selected" attribute will be displayed in the drop-down list select tag.
Syntax:
<option value="value" selected>选项名称</option>
Example 1: Using the selected attribute
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置select元素的默认值</title> </head> <body style = "text-align:center;"> <b>如何设置select元素的默认值？</b> <p>默认情况下，显示第一个option选项</p> <select name="plan" id="plan"> <option value="free">Free</option> <option value="starter">Starter </option> <option value="professional">Professional</option> <option value="corporate">Corporate</option> </select> <p>设置Professional选项为默认值</p> <select name="plan" id="plan"> <option value="free">Free</option> <option value="starter">Starter </option> <option value="professional" selected>Professional</option> <option value="corporate">Corporate</option> </select> </body> </html>
Rendering:
Example 2: Add a message like "Please select an option" to the list. This option has hidden and disabled properties in addition to checked.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置select元素的默认值</title>
</head>
<body style = "text-align:center;">
<p>设置select选项框的默认值</p>
<select name="plan" id="plan">
<option value="none" selected disabled hidden>请选择选项</option>
<option value="free">Free</option>
<option value="starter">Starter </option>
<option value="professional">Professional</option>
<option value="corporate">Corporate</option>
</select>
</body>
</html>Rendering:
Recommended learning: html video tutorial
The above is the detailed content of How to set the default value of HTML select drop-down box?. For more information, please follow other related articles on the PHP Chinese website!
