select（html要素）-CSSチュートリアル-php.cn

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

ログイン後にコピー

フォームでの使用方法？

タグ内で

要素を囲みます。選択された値は、フォームで送信されます。<select> <form>

CSSでスタイリングする方法？

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

ログイン後にコピー

標準のCSS技術を使用して

要素をスタイルします。ブラウザとOSの違いはレンダリングに影響する可能性があることに注意してください

<select>フォームなしで使用できますか？

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

ログイン後にコピー

はい、ただし、選択した値は提出されません。

JavaScriptで変更イベントを処理する方法は？

イベント属性を使用するか、イベントリスナーを追加します。

他のフォーム要素で使用できますか？

onchangeはい、複雑な形の他のフォーム要素と組み合わせることができます。

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

ログイン後にコピー

以上がselect（html要素）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。