選擇（HTML元素）-css教學-PHP中文網

選擇（HTML元素）

Joseph Gordon-Levitt

發布： 2025-02-26 10:10:08

原創

817 人瀏覽過

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

登入後複製

如何設置默認選項？

>在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中文網其他相關文章！