2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい

下記コードにdocument.getElementById('').value;を使い1つめのボックスを見えなくしたいのですが、どのように組めばいいでしょうか？

※参考サイト
https://bonoponz.hatenablog.com/entry/2020/05/12 …


<select name="OS">
<option value="">OSを選択</option>
<option value="Windows">Windows</option>
<option value="Android">Android</option>
<option value="iOS">iOS</option>
<select>
<select name="version">
</select>

<script>
let versionArray = new Array();
versionArray[''] = new Array('バージョン情報');
versionArray['Windows'] = new Array('XP', 'Vista', '7', '8', '8.1', '10');
versionArray['Android'] = new Array('7 (Nougat)', '8 (Oreo)', '9 (Pie)', '10');
versionArray['iOS'] = new Array('10以下', '11', '12', '13');

document.getElementsByName('OS')[0].onchange = function () {
let os = this.value;
let elm = document.getElementsByName('version')[0];
elm.options.length = 0;
for (let i = 0; i < versionArray[os].length; i++) {
let op = document.createElement('option');
op.value = versionArray[os][i];
op.textContent = versionArray[os][i];
elm.appendChild(op);
}
};
window.onload = function () {
document.getElementsByName('OS')[0].onchange();
};
</script>

No.2 ベストアンサー 回答者： fujillin 回答日時： 2022/07/06 01:13

No1です。

＞値というのは<select name="OS">にidを振ってそこから
＞値を取得→正誤判定するということでしょうか？
すでに要素も値も取得できているのですから、そんな必要はありません。

例えば、
＞let os = this.value;
の次に、
　if(os) this.style.visibility = 'hidden';
の1行を追加しておけば、ひとまず、ご質問のようになるかと。
ただし、非表示にするだけで、イベント設定等はそのままです。

この回答へのお礼

あれからコードを変更したのですが、設計がわからないためアドバイス頂けると助かります。

コードを組む難易度も教えていただけると助かります。

お礼日時：2022/07/07 00:31

No.1 回答者： fujillin 回答日時： 2022/07/05 23:17

こんばんは

＞1つめのボックスを見えなくしたいのですが、どのように組めばいいでしょうか？
初期設定でもイベント処理を利用しているようなので・・

イベント処理内で、値が""でないことを条件に、要素の style.visibility = 'hidden' に設定しておけばよいのではないでしょうか？
display = 'none' でも良いですけれど、その場合は表示レイアウトが詰められます。

この回答へのお礼

回答ありがとうございます。

値が""でないことを条件にということなのですが、値というのは<select name="OS">にidを振ってそこから値を取得→正誤判定するということでしょうか？

お礼日時：2022/07/05 23:45