How to set the default value of HTML select drop-down box?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set the default value of HTML select drop-down box?

醉折花枝作酒筹

Apr 26, 2021 am 11:47 AM

html 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.

How to set the default value of HTML select drop-down box?

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>

Copy after login

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>

Copy after login

Rendering:

How to set the default value of HTML select drop-down box?

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>

Copy after login

Rendering:

How to set the default value of HTML select drop-down box?

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn