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>

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>

<!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>

<!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

関連投稿: