DOM

【JavaScript】select要素の値取得/設定と動的に項目追加する方法

更新日：2023/09/04

HTMLのselectタグからJavaScriptで値を取得したり、設定したりする方法を紹介します。

 

select要素の取得

値を取得する前に、DOMからselect要素を取得する方法をお伝えします。

取得方法はいくつかありますが、idまたはname属性のどちらかで取得するケースが多いです。

次のような、idに"animal"、nameにも"animal"が設定されているselect要素を取得してみます。

<select id="animal" name="animal">
  <option value="dog" selected >イヌ</option>
  <option value="cat">ネコ</option>
  <option value="panda">パンダ</option>
</select>

select本体の取得

idで取得するときは、document.getElementById()を使用します。

const selbox = document.getElementById( "animal" );

nameで取得するときは、document.getElementById()を使用します。

const selbox = document.getElementsByName( "animal" )[0];

最後に[0] が付いている点に注意です。

同名のidはページ内に一つのみですが、nameはいくつでも設定できます。
そのため、document.getElementById()は結果を配列で返します。
そして一番目の要素[0]を変数にセットしています。

なお、select要素の取得はDOMが構築されてから行います。
詳しくは、次のページをよんでみてください。

■【JavaScript】DOM要素を取得できないときの対処法

optionの取得

次にselect内のoption要素の取得方法も挙げておきます。

option要素は、select要素のoptionsプロパティにセットされています。

const selbox = document.getElementById( "animal" );
console.log( selbox.options );
// 結果: {
//     0: <option value="dog">
//     1: <option value="cat">
//     2: <option value="panda">
//     length: 3
//     selectedIndex: 0
//  }

optionsプロパティの内容は配列のように見えますが、配列ではありません。
そのため、forEach()などでループできません。
この場合、lengthプロパティを使って、for文で回します。

その他にも方法があります。詳しくは次のページを読んでみてください。

■【JavaScript】 getElementsByClassNameでforEachがエラーな理由と対処方法

上記のページはgetElementsByClassName()について記述されていますが、同じ方法で対処できます。

 

select要素の変更検出

select要素の選択値が変更されると"change"イベントが発生します。
ここで、選択後の処理をおこないます。

const selbox = document.getElementById( "animal" );

let c = 1;
selbox.addEventListener( "change" ,()=>{
    console.log( `${c++}回目:選択が変更された！` );
});

▶

 

select要素の値取得

select要素の値取得ですが、select要素は単一選択と複数選択の二つのモードがあります。

次のようにselectタグにmultipleが記述されていると、複数選択モードです。

<select id="animal" name="animal" multiple >

記述されていないと、単一選択モードです。
それぞれ値の取得方法が異なります。

記事が長くなってしまったので複数選択の値取得方法は別ページに分けたので、そちらをご覧ください。

■【JavaScript】複数選択(multiple)可能なselect要素の値取得と設定方法

select要素が単一選択モードのときの、value属性、インデックス番号、表示されている文字の取得方法の３種類を紹介します。

value属性の取得

単一選択モードのとき、現在選択されているoptionのvalue属性は、select要素のvalueプロパティで取得できます。

const selbox = document.getElementById( "animal" );
console.log( `初期:"${ selbox.value }"が選択された！` );

let c = 1;
selbox.addEventListener( "change" ,()=>{
    console.log( `${c++}回目:"${ selbox.value }"が選択された！` );
});

▶

インデックス番号の取得

単一選択モードのとき、現在選択されているoptionのインデックス番号は、select要素のselectedIndexプロパティで取得できます。

const selbox = document.getElementById( "animal" );
console.log( `初期インデックス: ${ selbox.selectedIndex} が選択された！` );

let c = 1;
selbox.addEventListener( "change" ,()=>{
    console.log( `${c++}回目:インデックス ${ selbox.selectedIndex} が選択された！` );
});

▶

表示されている文字の取得

単一選択モードのとき、selectedOptionsプロパティの0番目に現在選択されているoption要素がセットされています。
そのため、optionの表示文字列は次の式で取得できます。

select要素.selectedOptions[0].innerText

const selbox = document.getElementById( "animal" );
console.log( `初期: ${ selbox.selectedOptions[0].innerText } が選択された！` );

let c = 1;
selbox.addEventListener( "change" ,()=>{
    console.log( `${c++}回目: ${ selbox.selectedOptions[0].innerText } が選択された！` );
});

▶

 

select要素の値設定

取得と同じように、value属性、インデックス番号、表示文字列で選択項目を設定する方法を紹介します。

ここでは、次のような二つのselectタグを想定して、一つ目のselectが変更されたら、その内容で二つ目のselectを変更するコードを作成しています。

<select id="animal1" name="animal" >
  <option value="dog"  selected>イヌ</option>
  <option value="cat" >ネコ</option>
  <option value="panda">パンダ</option>
  <option value="koala">コアラ</option>
</select>
<select id="animal2" name="animal" >
  <option value="dog"  selected>イヌ</option>
  <option value="cat" >ネコ</option>
  <option value="panda">パンダ</option>
</select>

value属性での設定

単一選択モードのとき、select要素のvalueプロパティに文字列をセットすると、option要素のvalueプロパティが検索されて一致するものが選択状態になります。
一致するものが無いときは、何も選択されていない状態になります。

  // 変更元
const selboxFrom = document.getElementById( "animal1" );
  // 変更先
const selboxTo = document.getElementById( "animal2" );

let c=1;

selboxFrom.addEventListener( "change" ,()=>{
  const value = selboxFrom.value;
  selboxTo.value = value;

  console.log( `${c++}回目： ${value}に変更${ 
    selboxTo.value !== value ? "できませんでした" : "しました" }` );
});

▶

インデックス番号での設定

単一選択モードのとき、select要素のselectedIndexプロパティに数値をセットすると、その数値をインデックスとして対応するoption要素が選択状態になります。
数値が範囲外のときは、何も選択されていない状態になります。

  // 変更元
const selboxFrom = document.getElementById( "animal1" );
  // 変更先
const selboxTo = document.getElementById( "animal2" );

let c=1;

selboxFrom.addEventListener( "change" ,()=>{
  const index = selboxFrom.selectedIndex;
  selboxTo.selectedIndex = index;

  console.log( `${c++}回目： インデックス${index}に変更${ 
    selboxTo.selectedIndex !== index ? "できませんでした" : "しました" }` );
});

▶

表示文字列での設定

表示文字列での設定は少し難しい処理が必要です。
まず表示されている文字の取得の方法で、変更元の文字列を取得します。

次に変更先のoptionsプロパティにセットされているoption要素のinnerTextと比較して、一致するものを探します。
一致するものがあったら、そのインデックスをselect要素のselectedIndexプロパティにセットします。

これで、変更先の選択項目が変更されます。

  // 変更元
const selboxFrom = document.getElementById( "animal1" );
  // 変更先
const selboxTo = document.getElementById( "animal2" );

let c=1;

selboxFrom.addEventListener( "change" ,()=>{
  const text = selboxFrom.selectedOptions[0].innerText; // 表示文字列取得
  const index = Array.from( selboxTo.options ) // optionsプロパティ（アレイライク）を配列化
                   .findIndex( e=>e.innerText === text ); // 表示文字列が一致するインデックスを検索

  selboxTo.selectedIndex = index;

  console.log( `${c++}回目： ${text} に変更${ 
    selboxFrom.selectedIndex !== selboxTo.selectedIndex ? "できませんでした" : "しました" }` );
});

▶

更新日：2023/09/04

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。