选择（HTML元素）

Joseph Gordon-Levitt原创: 2025-02-26 10:10:08826浏览

<code class="language-html"><!DOCTYPE html>


<title>HTML Select Element</title>



<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/imghwm/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>
</code>

如何设置默认选项？

>在selected元素中使用<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>

如何分组相关选项？

>使用<optgroup>元素用公共标签进行分组选项。

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

>如何允许多个选择？

> 在

如何禁用选项？multiple> <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>

>属性。

如何以形式使用？disabled <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>

如何使用CSS样式？

> <select>>使用标准CSS技术样式<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>

我可以不用表格吗？

是的，但是不会提交选定的值。<select>>

如何使用JavaScript处理更改事件？

<code>select {
  background-color: yellow;
  color: black;
  border: 1px solid black;
}
</code>

>使用

>事件属性或添加事件侦听器。

我可以与其他表单元素一起使用吗？

> 是的，可以将其与复杂形式的其他形式元素结合在一起。>

onchange

以上是选择（HTML元素）的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html select using Attribute Event default Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：moz-border-radius (CSS property)下一篇：How to Use Unicode to Create Bullet Points, Trademarks, Arrows and More

查看更多