JavaScript スプレッド構文でセレクトボックスのoption要素をforEachでループするサンプル
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122
書式
1.select要素をidで取得します
const 変数名1 =document.getElementById('セレクトボックスのID名’)
2.スプレッド構文でセレクトボックスのoption要素を取得します。
const 変数名2 =[…変数名1.options];
3.forEachでoptionの要素をループします
変数名2.forEach(e=>{処理コード});
使用例
<!DOCTYPE html> <html> <body> 都市名: <select id="city" name="city" > <option value="tokyo" selected>東京</option> <option value="oosaka">大阪</option> <option value="fukuoka">福岡</option> </select> <script> //select要素をidで取得 const city = document.getElementById('city'); //option要素を取得 const cft = [...city.options]; //スプレッド構文 cft.forEach(e => { //option要素のラベル console.log('option要素のラベル:' + e.label) //option要素の値 console.log('option要素の値:' + e.value) //option要素の選択状態 console.log('option要素の選択状態:' + e.selected) }); </script> </body> </html>
実行結果
option要素のラベル:東京 option要素の値:tokyo option要素の選択状態:true option要素のラベル:大阪 option要素の値:oosaka option要素の選択状態:false option要素のラベル:福岡 option要素の値:fukuoka option要素の選択状態:false