Pilih (elemen HTML)-tutorial css-php.cn

Pilih (elemen HTML)

Joseph Gordon-Levitt

Lepaskan： 2025-02-26 10:10:08

asal

817 orang telah melayarinya

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

Salin selepas log masuk

bagaimana untuk menetapkan pilihan lalai?

Gunakan atribut selected dalam elemen <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>

Salin selepas log masuk

bagaimana untuk mengumpulkan pilihan berkaitan?

Gunakan elemen <optgroup> ke pilihan kumpulan dengan label biasa.

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

Salin selepas log masuk

bagaimana untuk membenarkan pelbagai pilihan?

tambah atribut multiple ke elemen <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>

Salin selepas log masuk

bagaimana untuk melumpuhkan pilihan?

Gunakan atribut disabled dalam elemen <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>

Salin selepas log masuk

bagaimana menggunakan dalam bentuk?

Lampirkan elemen <select> dalam tag <form>. Nilai yang dipilih akan dikemukakan dengan borang.

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

Salin selepas log masuk

bagaimana gaya dengan css?

gaya <select> elemen menggunakan teknik CSS standard. Perhatikan bahawa perbezaan penyemak imbas dan OS boleh menjejaskan rendering.

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

Salin selepas log masuk

bolehkah saya menggunakan tanpa borang?

Ya, tetapi nilai yang dipilih tidak akan dikemukakan.

bagaimana menangani peristiwa perubahan dengan javascript?

Gunakan atribut acara onchange atau tambahkan pendengar acara.

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

Salin selepas log masuk