<!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>
Verwenden Sie das Attribut selected im Element <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>
Verwenden Sie das Element <optgroup>, um Optionen mit einem gemeinsamen Etikett zu gruppieren.
<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> fügen Sie das Attribut multiple zum <select> Element hinzu.
<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>
Verwenden Sie das Attribut disabled im Element <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>
Einschließen Sie das <select> -Element in <form> Tags. Der ausgewählte Wert wird mit dem Formular eingereicht.
<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 das <select> -Element mit Standard -CSS -Techniken. Beachten Sie, dass Browser- und Betriebssystemunterschiede das Rendering beeinflussen können.
<code>select {
background-color: yellow;
color: black;
border: 1px solid black;
}
</code>Ja, aber der ausgewählte Wert wird nicht eingereicht.
Verwenden Sie das Ereignisattribut onchange oder fügen Sie einen Ereignishörer hinzu.
<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>Ja, es kann mit anderen Formelementen in komplexer Form kombiniert werden.