memo

memo dayo.

selectのoptionを非表示にする時のメモ

■Before

<select>
<option id="test0" value="">▼ 選択してね!</option>
<option id="test1" value="1">A</option>
<option id="test2" value="2">B</option>
<option id="test3" value="3">C</option>
</select>


■例えばこんな感じで、hidden属性を追加

document.getElementById('test0').setAttribute('hidden','hidden');
document.getElementById('test2').setAttribute('hidden','hidden');


■After

<select>
<option id="test0" hidden="hidden" value="">▼ 選択してね!</option>
<option id="test1" value="1">A</option>
<option id="test2" hidden="hidden" value="2">B</option>
<option id="test3" value="3">C</option>
</select>


■結果
・すでに表示されている「▼ 選択してね!」は表示されたまま
・選択値を変更しようとすると「▼ 選択してね!」と「B」は表示されない
・ただし選択値の変更を確定しないと「▼ 選択してね!」に戻る
・一度選択値の変更を確定すると「▼ 選択してね!」は表示されない