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

HTML,JavaScript

見出し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の項目が選択できなくなります。

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。

あなたにマッチした記事をお届けします
ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
便利な情報をあとで効率的に読み返せます
気に入った記事を「ストック」することで、あとからすぐに検索できます

東京在住の社会人です。プログラムの勉強中です。よろしくお願いします。

@833572x

2022-06-04 12:37

<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>

HTML側でdisabledにしたいoptionタグにあらかじめdata-val="1"を追記しておかなくてはならない上記の方法は単純に

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

と書いているのと変わらず、「動的に選択できなくする」要件は満たせていないのではないでしょうか。

disabledにしたいoption要素のvalueを配列で持たせて

<select id='selectbox'>
<option value='item1'>アイテム1</option>
<option value='item2'>アイテム2</option>
<option value='item3'>アイテム3</option>
</select>

<script>
const disabledOptions = ['item2', 'item3'];
for(const o of document.querySelector('#selectbox').options) o.disabled = disabledOptions.includes(o.value);
</script>