HTMLSelectElement: value プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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;
}

仕様書

Specification

HTML
# dom-select-value-dev

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2024年10月19日 by MDN contributors.

View this page on GitHub • Report a problem with this content

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

HTMLSelectElement: value プロパティ

In this article

値

例

選択された値の取得

仕様書

ブラウザーの互換性

関連情報

Help improve MDN