HTMLSelectElement: value プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

HTMLSelectElement.value プロパティは、この <select> 要素に関連付けられた <option> 要素のうち、選択された最初のものの値を格納します。

このプロパティは直接設定することもでき、例えば、何らかの条件に基づいて既定値を設定するには、次のようにします。

値

この <select> 要素で最初に選択された <option> 要素の値を格納する文字列、またはオプションが選択されていない場合は空文字列。

例

選択された値の取得

html
<label for="bird-select">鳥を選択してください:</label>

<select name="birds" id="bird-select">
  <option value="">--オプションを選択してください--</option>
  <option value="Scarlet ibis">ショウジョウトキ</option>
  <option value="Marabou stork">マラボウコウノトリ</option>
  <option value="Roseate spoonbill">ベニヘラサギ</option>
</select>

<pre id="log"></pre>

js
const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = text;
}

const select = document.querySelector("#bird-select");
select.addEventListener("change", () => {
  log(`選択: ${select.value}`);
});

#log {
  height: 20px;
  padding: 0.5rem;
  border: 1px solid black;
}

仕様書

HTML
# dom-select-value-dev

ブラウザーの互換性

ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。

MDN の改良に協力

このページは役に立ちましたか？

はいいいえ

協力方法を知る

このページは MDN の貢献者によって 2024年10月19日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

HTML DOM API
HTMLSelectElement
インスタンスプロパティ
インスタンスメソッド
継承
HTML DOM に関連するページ
ガイド
1. JavaScript で queueMicrotask() によるマイクロタスクの使用
2. In depth: Microtasks and the JavaScript runtime environment

HTMLSelectElement: value プロパティ

目次

値

例

選択された値の取得

仕様書

ブラウザーの互換性

関連情報

MDN の改良に協力