<!DOCTYPE html>
<html>
<head>
<title>HTML Select Element</title>
</head>
<body>
<h1>HTML Select Element</h1>
<p>The select form control provides a dropdown menu for user selection. It allows single or multiple selections depending on the `multiple` attribute. Styling with CSS can be challenging due to operating system rendering variations.</p>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174053581124774.jpg" class="lazy" alt="select (HTML element) " />
<h2>Example</h2>
<p>A basic select element:</p>
<select id="favoritefood">
<option value="cheese">Cheese</option>
<option value="egg">Egg</option>
<option value="cabbage">Cabbage</option>
</select>
<h2>Use Cases</h2>
<p>Use the select element to present users with a list of choices, conserving space compared to radio buttons.</p>
<h2>Frequently Asked Questions</h2>
<h3>How to create a dropdown list?</h3>
<p>Combine the <code><select></code> element with <code><option></code> elements. <code><select></code> defines the list, and each <code><option></code> represents a selectable item. The <code>value</code> attribute specifies the submitted value.</p>
<pre class="brush:php;toolbar:false"><code><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Utilisez l'attribut selected dans l'élément <option>.
<code><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes" selected>Mercedes</option>
<option value="audi">Audi</option>
</select>
</code>
Utilisez l'élément <optgroup> pour regrouper les options avec une étiquette commune.
<code><select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</code>
Ajouter l'attribut multiple à l'élément <select>.
<code><select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</code>
Utilisez l'attribut disabled dans l'élément <option>.
<code><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes" disabled>Mercedes</option>
<option value="audi">Audi</option>
</select>
</code>
Entrez l'élément <select> dans les balises <form>. La valeur sélectionnée sera soumise avec le formulaire.
<code><form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</code>
Style l'élément <select> en utilisant des techniques CSS standard. Notez que les différences de navigateur et de SG peuvent affecter le rendu.
<code>select {
background-color: yellow;
color: black;
border: 1px solid black;
}
</code>
Oui, mais la valeur sélectionnée ne sera pas soumise.
Utilisez l'attribut onchange événement ou ajoutez un écouteur d'événement.
<code><select onchange="myFunction(this.value)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<script>
function myFunction(value) {
console.log("Selected value: " + value);
}
</script>
</code>
Oui, il peut être combiné avec d'autres éléments de forme sous une forme complexe.
![\"select](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174053581124774.jpg\")
\n\n