セレクトボックスの一部の項目を選択できなくする

見出し1

JavaScriptでセレクトボックスの一部を動的に選択できなくする方法を記載します。

コード

<select name="selectbox" id="selectbox">
<option value="item1" data-val="0">アイテム1</option>
<option value="item2" data-val="1">アイテム2</option>
<option value="item3" data-val="1">アイテム3</option>
</select>

let items = Array.from(document.querySelectorAll('#selectbox option[data-val="1"]'));
items.forEach(option => option.disabled = true);

これでセレクトボックスのdata-valが1の項目が選択できなくなります。