JavaScriptでSelectBoxの選択されているoptionを探す方法・取得する方法(selectedIndex, selected)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptでSelectBoxの選択されているoptionを探す方法・取得する方法(selectedIndex, selected)について解説していきます。

1 JavaScriptでSelectBoxの選択されているoptionを探す方法・取得する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

JavaScriptでSelectBoxの選択されているoptionを探す方法・取得する方法

JavaScriptでSelectBoxの選択されているoptionを探す方法・取得する方法には、次の2つがあります。

SelectElementのselectedIndexプロパティから選択されているoptionを探す方法と、

options(HTMLCollection)から selected(真偽値)で選択されているoptionを探す方法です。

<body>
<p>選択しているロボ玉 => <span id="output"></span></p>

<select id="robotama">
    <option value="">選択してください</option>
    <option value="ロボ玉試作1号機">ロボ玉試作1号機</option>
    <option value="ロボ玉試作2号機">ロボ玉試作2号機</option>
    <option value="ロボ玉試作3号機">ロボ玉試作3号機</option>
</select>

<input type="button" value="君に決めた！" onclick="clickBtn()"/>

<p>君の好きなロボ玉 => <span id="output2"></span></p>

<script>
const clickBtn = () => {

    const select = document.getElementById('robotama');
    console.log({select});
    console.log(select.options);

    // 1. selectedIndexから選択されているoptionを探す方法

    // 1-1. selectedIndexで選択されているoptionのindexを取得する
    const selectIdx = select.selectedIndex;
    console.log({selectIdx});

    // 1-2. indexから該当のoptionにアクセスする
    const value = select.options[selectIdx].value;
    console.log({value});
    document.getElementById("output").textContent = value;
    
    // 2. options(HTMLCollection)から selected(真偽値)で選択されているoptionを探す方法
    const selected = [...select.options].find(opt => opt.selected);
    console.log({selected: selected.value});
    document.getElementById("output2").textContent = selected.value;
}
</script>    
</body>