Comment définir la valeur par défaut de la liste déroulante de sélection HTML ?-tutoriel HTML-php.cn

Comment définir la valeur par défaut de la liste déroulante de sélection HTML ?

醉折花枝作酒筹

Libérer： 2021-04-26 11:47:28

avant

7417 Les gens l'ont consulté

Cet article vous expliquera comment définir la valeur par défaut de la liste déroulante de sélection. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comment définir la valeur par défaut de la liste déroulante de sélection HTML ?

Nous pouvons définir la valeur par défaut de l'élément select en utilisant l'attribut "selected" sur l'option souhaitée, qui est un attribut booléen.

Par défaut, la balise d'option avec l'attribut "selected" sera affichée dans la liste déroulante des balises de sélection.

Syntaxe :

<option value="value" selected>选项名称</option>

Copier après la connexion

Exemple 1 : Utilisation de l'attribut sélectionné

<!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>

Copier après la connexion

Rendu :

Comment définir la valeur par défaut de la liste déroulante de sélection HTML ?

Exemple 2 : Ajoutez un message du type « Veuillez sélectionner une option » à la liste. Cette option a des propriétés masquées et désactivées en plus d'être cochées.

<!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>

Copier après la connexion

Rendu :

Comment définir la valeur par défaut de la liste déroulante de sélection HTML ?