To implement drop-down lists in web pages, a common method is to use the combination of <select> and <option> tags in HTML. 1. Basic structure: Use <select> to create an optional menu; 2. Set default selections: add selected attributes on a certain <option>; 3. Group display options: Use <optgroup> to organize options by category; 4. Multiple selection function: Add multiple attributes to <select> to support multiple selection. In addition, the form function can be enhanced by combining required and name attributes.

In web development, drop-down lists are a common and practical interactive element. To achieve it, the most common way is to use the <select></select> and <option></option> tag combination in HTML. They allow you to easily create a menu where users can select a value from multiple options.

Basic structure: How to write a simple drop-down menu

Creating a drop-down list is actually very simple. Just one <select></select> tag is needed to wrap multiple <option></option> tags, each <option></option> represents an optional option. for example:

 <select>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">orange</option>
</select>

This creates a drop-down box that can be clicked to expand and select fruit. By default, the browser displays the first option as the initial selection.

If you want the user to select an option to submit the form, you can add the required attribute:

• <select required>

You can also set name attribute to let this drop-down menu bring the corresponding name when submitting the form:

• <select name="fruit">

Set default selection: Make an option automatically selected

Sometimes you want the page to load and there is an option that is selected by default. At this time, you can use selected attribute on <option> . For example:

 <option value="banana" selected>Banana</option>

Once the page opens, "Banana" will appear in the drop-down box. It should be noted that selected is a Boolean property that does not require assignment, and it will take effect as long as it is written.

If you have multiple <option> s added selected , the browser will usually only select the first one that appears. So it is recommended to add this attribute to only one option.

Group display options: Use optgroup to classify options

When there are many options and there are obvious classifications, you can use the <optgroup> tag to display the relevant <option> in groups. for example:

 <select>
  <optgroup label="domestic mobile phone">
    <option value="huawei">Huawei</option>
    <option value="xiaomi">Xiaomi</option>
  </optgroup>
  <optgroup label="International Brand">
    <option value="apple">Apple</option>
    <option value="samsung">Samsung</option>
  </optgroup>
</select>

This will make the drop-down menu look more organized. Note that <optgroup> cannot be selected by itself, but is only used to organize content. And nesting is not currently supported, which means that you cannot put another <optgroup> in a <optgroup> .

Multiple values ??are available: let the user select multiple options at once

If you want the user to have multiple choices, you can add multiple attribute to the <select> tag:

 <select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">blue</option>
</select>

At this time, the user can select multiple options by holding down Ctrl (or Command on Mac). Some browsers also display as a list of scrolling up and down instead of a drop-down box that is folded up.

If you want to limit the maximum number of selected two, you need to cooperate with JavaScript to control the number of selected items, because HTML itself does not provide the function of limiting the number of selected items.

Basically that's it. Using <select></select> and <option></option> to build a drop-down menu is not complicated, but you can flexibly adjust the style and behavior according to your needs.

The above is the detailed content of Creating Dropdown Lists with the HTML select and option Elements. For more information, please follow other related articles on the PHP Chinese website!