JavaScript プロパティ「options」を使用してセレクトボックス(selectbox)内の値を全てを取得する
環境
Google Chrome 111.0.5563.147
Windows 10 Home 64bit
書式
1. セレクトボックスの要素を取得します
let 変数名 =document.getElementById( “セレクトボックスのID名" ).options;
2.forEachでoptionsをループ処理します
[…変数名].forEach(option=>{処理コード}
ラベルの値の取得
option.label
selectboxの値の取得
option.value
使用例
<!DOCTYPE html>
<html>
<body>
<select id="city">
<option selected>都市の選択</option>
<option value="101">Tokyo</option>
<option value="202">Oosaka</option>
<option value="303">Fukuoka</option>
</select>
<p>
<button onclick="funA()">表示</button></p>
<script>
function funA() {
let cft = document.getElementById( "city" ).options;
[...cft].forEach(option => {
console.log(option.label)
console.log(option.value)
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<select id="city">
<option selected>都市の選択</option>
<option value="101">Tokyo</option>
<option value="202">Oosaka</option>
<option value="303">Fukuoka</option>
</select>
<p>
<button onclick="funA()">表示</button></p>
<script>
function funA() {
let cft = document.getElementById( "city" ).options;
[...cft].forEach(option => {
console.log(option.label)
console.log(option.value)
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<select id="city">
<option selected>都市の選択</option>
<option value="101">Tokyo</option>
<option value="202">Oosaka</option>
<option value="303">Fukuoka</option>
</select>
<p>
<button onclick="funA()">表示</button></p>
<script>
function funA() {
let cft = document.getElementById( "city" ).options;
[...cft].forEach(option => {
console.log(option.label)
console.log(option.value)
});
}
</script>
</body>
</html>
実行結果
都市の選択
都市の選択
Tokyo
101
Oosaka
202
Fukuoka
303