<select>【選択リスト (List box control / HTML 4.01：option selector)】

概要 ( 例 DOM・Web API 関連要素 外部リンク ) 構文 DOMインタフェース
定義： 送信データ名 表示形式 選択項目 複数選択 選択項目の選択 グループ化 ( 参考：コンボボックス )

概要

メモ

例

<p>
  <select size="1">
    <option>項目１
    <option>項目２
    <option>項目３
    <option>項目４
  </select>
  ドロップダウンリスト
</p>

<p>
  <select size="1">
    <optgroup label="グループＡ">
      <option>項目１
      <option>項目２
    </optgroup>
    <optgroup label="グループＢ">
      <option>項目３
      <option>項目４
    </optgroup>
  </select>
  ドロップダウンリスト＋グループ化
</p>

<p>
  <select size="3">
    <option>項目１
    <option>項目２
    <option>項目３
    <option>項目４
  </select>
  リストボックス
</p>

<p>
  <select size="3">
    <optgroup label="グループＡ">
      <option>項目１
      <option>項目２
    </optgroup>
    <optgroup label="グループＢ">
      <option>項目３
      <option>項目４
    </optgroup>
  </select>
  リストボックス＋グループ化
</p>

<p>
  <select size="3" multiple>
    <option>項目１
    <option selected>項目２
    <option selected>項目３
    <option>項目４
  </select>
  リストボックス＋複数選択
</p>

<p>
  <select size="3" multiple>
    <optgroup label="グループＡ">
      <option>項目１
      <option selected>項目２
    </optgroup>
    <optgroup label="グループＢ">
      <option>項目３
      <option selected>項目４
    </optgroup>
  </select>
  リストボックス＋グループ化＋複数選択
</p>

ドロップダウンリスト

ドロップダウンリスト＋グループ化

リストボックス

リストボックス＋グループ化

リストボックス＋複数選択

リストボックス＋グループ化＋複数選択

DOM・Web API (一部)

処理プロパティ / メソッド備考
選択項目変更イベントonchange 一部ブラウザで、ドロップダウンリストで上下矢印キーの選択は非通知
(Firefox：フォーカス喪失で通知)
未選択状態に変更時は、非通知
入力不正イベントoninvalidrequired【入力必須】 チェック
要素取得document.getElementById(【id】)HTMLSelectElement
選択項目番号 (0～)selectedIndex複数選択時は先頭の選択項目番号 (-1：未選択)
選択項目値value複数選択時は先頭の選択項目値
項目数options.length
項目 (コレクション)optionsHTMLOptionsCollection
項目options[【項目番号 (0～)】]HTMLOptionElement
項目値 取得・設定options[【項目番号 (0～)】].value
項目テキスト 取得・設定options[【項目番号 (0～)】].text
項目選択有無 取得・設定options[【項目番号 (0～)】].selectedtrue / false
項目追加 var option = document.createElement("option");
option.value = 【項目値】;
option.text = "【項目テキスト】";
～.appendChild(option);
先頭項目削除～.removeChild(～.firstChild)全項目削除で使用
指定項目削除～.removeChild(～.options[【項目番号 (0～)】])
スタイル 取得・設定style.～color・backgroundColor 等

構文

<select必須開始タグ
autofocusページロード時、自動フォーカス
disabledコントロール無効化
form=【form要素id】関連付けform要素id属性 (コントロールをform要素外に定義可能)
multiple複数選択可
name=【コントロール名】コントロール名 (送信データ名) id との重複は不可
required入力必須
size=【リスト内表示行数】リスト内表示行数 (省略時：1 / multiple属性指定の場合 4)
・1：ドロップダウンリスト
・2以上：リストボックス

【グローバル属性】

accesskey=【アクセスキー (複数：半角スペース区切り)】アクセスキー
class=【クラス名 (複数：半角スペース区切り)】 所属クラス (複数指定：<style>【スタイル情報】)・外部スタイルシートで後から定義したほうが優先
contenteditable [ ="" (可能) | true (可能) | false (不可) | inherit (親要素継承) ]編集可否
contextmenu=<menu>【メニュー】 のid コンテキストメニューのid
data-*=【カスタムデータ】 カスタムデータ属性
dir=ltr (左から右) | rtl (右から左) | auto (自動) 文字表記方向 (ltr：left to right text or table / rtl：right to left text or table)
※<bdo>【テキスト方向形式】の場合、ltr または rtlが必須
draggable=true (ドラッグ可能) | false (ドラッグ不可) | auto (ブラウザ既定) ドラッグ可否
dropzone=copy (ドロップデータのコピー) | move (ドロップデータを移動) | link (ドロップデータのリンク)
ドロップデータの扱い
hidden非表示
id=【id】id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む)
(<a>【ハイパーリンク】のリンク先・CSS対象(#～)・スクリプト参照)
is=【定義名】定義名
itemid=【URL】アイテムのグローバル識別子
itemprop=【アイテムのプロパティ (複数：半角スペース区切り)】 アイテムのプロパティ
itemref=【要素IDのリスト】アイテムの参照リスト
itemscopeアイテムのプロパティ宣言
itemtype=【アイテムの型 (複数：半角スペース区切り)】アイテムの型
lang=【言語コード】言語コード (【主コード】-【副コード】 例："ja"：日本語 / "en"：英語 / "en-US"：アメリカ英語)
slot=<slot>【スロット】のname属性スロット名
spellcheck=true | falseスペルチェック有無
style=【スタイルシート (複数：セミコロン区切り / 最後のセミコロンは省略可)】スタイル
tabindex=【タブインデックス番号】タブインデックス
title=【説明文】説明 (多くはツールチップ表示)
※<link>【メタデータリンク】：メタデータリンクのタイトル
※<style>【スタイル情報】：スタイルシート名
translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外)翻訳可否
>

<optgroup>【選択項目のグループ化】
<option>【選択リストの選択項目】
script
template

</select>必須終了タグ

DOMインタフェース (HTMLSelectElement・HTMLElement)

interface HTMLSelectElement : HTMLElement { W3C：interface HTMLSelectElement (英語)

【プロパティ】

【HTMLSelectElement プロパティ】

autofocus;ページロード時、自動フォーカス
disabled;無効化
attribute HTMLFormElement?form; <form>【フォーム】 エレメント
labels; 関連付け<label>【ラベル】エレメント リスト  (W3c：NodeList (英語))
attribute unsigned longlength;<option>【選択リストの選択項目】エレメント数
multiple;複数選択可
name;コントロール名
attribute HTMLOptionsCollectionoptions;<option>【選択リストの選択項目】エレメント コレクション
required;入力必須
attribute longselectedIndex;選択項目番号
attribute HTMLCollectionselectedOptions;選択された<option>【選択リストの選択項目】エレメント コレクション
attribute unsigned longsize;リスト内表示行数
type;タイプ (単一選択："select-one" / 複数選択可："select-multiple")
validationMessage;妥当性チェックNG時メッセージ
attribute ValidityStatevalidity; 妥当性状態
interface ValidityState {
valueMissing;未入力
typeMismatch;タイプ不正
patternMismatch;パターン不正
tooLong;データ長超過
tooShort;データ長不足
rangeUnderflow;アンダーフロー
rangeOverflow;オーバーフロー
stepMismatch;ステップ不正
badInput;不正入力
customError;カスタムエラー
valid;有効
};
value;値
willValidate;妥当性チェック対象

【HTMLElement プロパティ】W3C：interface HTMLElement (英語) HTML 5.1・HTML 5.2・WHATWG

accessKey;アクセスキー
accessKeyLabel;アクセスキー表現文字列
contentEditable;編集可能状態 ("true"：編集可能 / "false"：編集不可 / "inherit"：親要素継承)
Mapdataset;カスタムデータ属性 (data-*) マップ
dir;文字表記方向 ("ltr"：左から右 / "rtl"：右から左)
draggable;ドラッグ可否
[PutForwards=value] attribute DOMTokenListdropzone;ドロップデータの扱い
hidden;非表示状態
[TreatNullAs=EmptyString]innerText;内容 (テキスト形式)
isContentEditable;編集可否
lang;言語コード
spellcheck;スペルチェック有無
attribute longtabIndex;タブインデックス
title;説明
translate;翻訳可否

【ElementCSSInlineStyle プロパティ】 HTMLElement implements ElementCSSInlineStyle; W3C：interface ElementCSSInlineStyle (英語)

attribute CSSStyleDeclarationstyle;スタイル

【CSSStyleDeclaration プロパティ】 (仕様上、次と同等： CSSStyleDeclaration implements CSS2Properties) W3C：Interface CSS2Properties (英語)

style.～;スタイル属性 (例：style.color・style.backgroundColor)

【Element プロパティ】interface HTMLElement : Element W3C：Interface Element (英語) HTML 5.1・HTML 5.2・WHATWG

[SameObject] attribute NamedNodeMapattributes;関連属性 マップ
[SameObject] attribute DOMTokenListclassList;クラス名 リスト
className;クラス名
id;id (ページ内で一意：name【コントロール(送信)名】を含む)
(innerHTML;)内容 (HTML形式) W3C：未定義 (参照：Element.outerHTML・Node.textContent (innerText))
localName;ローカル名
?namespaceURI;ネームスペースURI
(outerHTML;)タグを含む内容 (HTML形式) W3C：未定義 (参照：Element.innerHTML・Node.textContent (innerText))
?prefix;プリフィックス
tagName;タグ名

【Node プロパティ】 interface Element : Node W3C：Interface Node (英語) HTML 5.1・HTML 5.2・WHATWG

?baseURI;ベースURI
[SameObject] childNodes;子ノード リスト
?firstChild;先頭子ノード
?lastChild;最終子ノード
?nextSibling;次の兄弟ノード
nodeName;ノード名
attribute unsigned shortnodeType;ノードタイプ
(ELEMENT_NODE / ATTRIBUTE_NODE / TEXT_NODE / CDATA_SECTION_NODE / ENTITY_REFERENCE_NODE / ENTITY_NODE / PROCESSING_INSTRUCTION_NODE / COMMENT_NODE / DOCUMENT_NODE / DOCUMENT_TYPE_NODE / DOCUMENT_FRAGMENT_NODE / NOTATION_NODE)
?nodeValue;ノード値
?ownerDocument;オーナードキュメント
?parentElement;親エレメント
?parentNode;親ノード
?previousSibling;前の兄弟ノード
?textContent;
(IE：innerText)		内容 (Text形式) (参照：Element.innerHTML・Element.outerHTML)
取得：要素内のHTMLタグを除外しテキストのみ
設定：HTMLタグはテキスト変換

【GlobalEventHandlers プロパティ (一部) 】 HTMLElement implements GlobalEventHandlers; W3C：interface GlobalEventHandlers (英語) HTML 5.1・HTML 5.2・WHATWG

attribute EventHandler onabort;on～;イベントハンドラ (例：onclick・onfocus)

【ParentNode プロパティ】Element implements ParentNode; W3C：Interface ParentNode (英語)

attribute unsigned longchildElementCount;子エレメントの数
[SameObject] attribute HTMLCollectionchildren;子エレメント コレクション
?firstElementChild;最初の子エレメント
?lastElementChild;最後の子エレメント

【NonDocumentTypeChildNode プロパティ】Element implements NonDocumentTypeChildNode; W3C：Interface NonDocumentTypeChildNode (英語)

?previousElementSibling;前の兄弟エレメント
?nextElementSibling;次の兄弟エレメント

【メソッド】

【HTMLSelectElement メソッド】

void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
boolean checkValidity();妥当性チェック
getter Element? item(unsigned long index);項目エレメント 取得
HTMLOptionElement? namedItem( name);項目エレメント 取得
void remove();項目削除
void remove(long index);項目削除
void setCustomValidity( error);妥当性エラーメッセージ設定
setter creator void (unsigned long index, HTMLOptionElement? option);

【HTMLElement メソッド】W3C：interface HTMLElement (英語) HTML 5.1・HTML 5.2・WHATWG

void click();クリック 操作
void focus();フォーカス設定 操作
void forceSpellCheck();スペルチェック
void blur();フォーカス喪失 操作

【Element メソッド】interface HTMLElement : Element W3C：Interface Element (英語)

? getAttribute( name);属性取得
? getAttributeNS(? namespace, localName);属性取得 (ネームスペース指定)
HTMLCollection getElementsByClassName( classNames);エレメント コレクション取得 (クラス名指定)
HTMLCollection getElementsByTagName( localName);エレメント コレクション取得 (タグ名指定)
HTMLCollection getElementsByTagNameNS(? namespace, localName);エレメント コレクション取得 (ネームスペース・タグ名指定)
boolean hasAttribute( name);属性チェック
boolean hasAttributeNS(? namespace, localName);属性チェック (ネームスペース指定)
void removeAttribute( name);属性削除
void removeAttributeNS(? namespace, localName);属性削除 (ネームスペース指定)
void setAttribute( name, value);属性設定
void setAttributeNS(? namespace, name, value);属性設定 (ネームスペース指定)

【Node メソッド】 interface Element : Node W3C：Interface Node (英語)

Node appendChild(Node node);子ノード追加
[NewObject] Node cloneNode(optional boolean deep = false);クローンノード作成
unsigned short compareDocumentPosition(Node other);他ノードとの位置比較
(DOCUMENT_POSITION_DISCONNECTED / DOCUMENT_POSITION_PRECEDING / DOCUMENT_POSITION_FOLLOWING / DOCUMENT_POSITION_CONTAINS / DOCUMENT_POSITION_CONTAINED_BY / DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC)
boolean contains(Node? other);指定子孫ノードの存在有無
boolean hasChildNodes();子ノードの存在有無
Node insertBefore(Node node, Node? child);指定ノード前挿入
boolean isDefaultNamespace(? namespace);デフォルトネームスペース チェック
boolean isEqualNode(Node? node);同一ノードチェック
? lookupNamespaceURI(? prefix);ネームスペースURI調査
? lookupPrefix(? namespace);ネームスペース プリフィックス調査
void normalize();標準化
Node removeChild(Node child);子ノード削除
Node replaceChild(Node node, Node child);子ノード置換

【ParentNode メソッド】Element implements ParentNode; W3C：Interface ParentNode (英語)

Element? querySelector( selectors);指定セレクタ先頭エレメント取得
[NewObject] NodeList querySelectorAll( selectors);指定セレクタ ノードリスト取得

【ChildNode メソッド】Element implements ChildNode; W3C：Interface ChildNode (英語)

void remove();削除
};