[ Javascript ] select.onchange で変更された項目の値とテキストを取得

Tweet

Pocket

HTML を学習するとすぐに select 要素を学ぶと思います。Windows のコンボボックスみたいなやつですね。ここでは select 要素で選択肢が変更された時の変更後の項目の値と表示されているテキストを Javascript で取得するサンプルコードを掲載しています。

select 要素の表示サンプル

選択肢１選択肢２選択肢３

onchange 属性の設定

リストから特定の項目を選択するのに用いられる select タグですが、onchange 属性を設定することで、選択肢が変更されたときに、変更後の項目のテキストや値を取得することができます。

<select name="select" onchange="outputSelectedValueAndText(this);">
    <option value="値1">選択肢１</option>
    <option value="値2">選択肢２</option>
    <option value="値3">選択肢３</option>
</select>

outputSelectedValueAndText 関数は自前で作成した javascript の関数で以下のとおりです。outputSelectedValueAndText 関数の引数にthis を設定していますが、this とは select タグ自身のことを指しています。

select で選択変更された値を取得

select 要素の onchange 属性で実際に変更された値とテキストを取得するサンプルスクリプトになります。サンプル内のコメントも参照ください。

function outputSelectedValueAndText(obj)
{
    /* 
     * obj は select タグであり、selectedIndex プロパティには
     * 変更後の選択項目のインデックスが格納されています
     */
    var idx = obj.selectedIndex;
    var value = obj.options[idx].value; // 値
    var text  = obj.options[idx].text;  // 表示テキスト

    // 値とテキストをコンソールに出力
    console.log('value = ' + value + ', ' + 'text = ' + text);
   
    /*
     * 出力例）選択肢２に変更された場合
     * ----------------------------------------------
     * value = 値2, text = 選択肢２
     */
}

Tweet

Pocket