Table of Contents
select (HTML element)
<!DOCTYPE html> <html> <head> <title>HTML Select Element</title> </head> <body> <h1 id="HTML-Select-Element">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 id="Example">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 id="Use-Cases">Use Cases</h2> <p>Use the select element to present users with a list of choices, conserving space compared to radio buttons.</p> <h2 id="Frequently-Asked-Questions">Frequently Asked Questions</h2> <h3 id="How-to-create-a-dropdown-list">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>
Copy after login
How to set a default option?
Use the selected attribute within the <option> element.
<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>
Copy after login
How to group related options?
Use the <optgroup> element to group options with a common label.
<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>Copy after login
How to allow multiple selections?
Add the multiple attribute to the <select> element.
<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>
Copy after login
How to disable an option?
Use the disabled attribute within the <option> element.
<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>
Copy after login
How to use in a form?
Enclose the <select> element within <form> tags. The selected value will be submitted with the form.
<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>Copy after login
How to style with CSS?
Style the <select> element using standard CSS techniques. Note that browser and OS differences may affect rendering.
<code>select {
background-color: yellow;
color: black;
border: 1px solid black;
}
</code>Copy after login
Can I use without a form?
Yes, but the selected value won't be submitted.
How to handle change events with JavaScript?
Use the onchange event attribute or add an event listener.
<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>Copy after login
Can I use with other form elements?
Yes, it can be combined with other form elements in a complex form.