JavaScript onchange属性でselectリスト変更された項目の値とテキストを取得するサンプル
環境
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, テキスト: 大阪」が表示されます。