JavaScript onchange属性でselectリスト変更された項目の値とテキストを取得するサンプル

2022年12月21日

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122（Official Build）（64 ビット）

構文
1.onchange属性を設定します
select name="select" onchange="関数名(this);"
onchange属性を設定して選択肢が変更された時に、変更後の項目のテキストや値を取得します。
2.選択変更された値を取得します
リストのインデックスを選択します
var index = obj変数名.selectedIndex;
変更された値を取得します
var selectVal = obj変数名.options[インデックスの値].value;

使用例

<!DOCTYPE html>
<html>
<body>
<select name="select" onchange="show(this);">
    <option value="tokyo">東京</option>
    <option value="oosaka">大阪</option>
    <option value="fukuoka">福岡</option>
</select>
<script>

function show(obj)
{
    /* 
     * obj は select タグであり、selectedIndex プロパティには
     * 変更後の選択項目のインデックスが格納されています
     */
    var index = obj.selectedIndex;
    var selectVal = obj.options[index].value; // 値
    var text  = obj.options[index].text;  // 表示テキスト
 
    // 値とテキストをコンソールに出力
   alert('値: ' + selectVal + ', ' + 'テキスト： ' + text);
   
}

</script>

</body>
</html>

実行結果
「大阪」を選択する場合、「値: oosaka, テキスト：大阪」が表示されます。

JavaScript

Posted by arkgame

関連記事: