
下記コードに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ベストアンサー
- 回答日時:
No1です。
>値というのは<select name="OS">にidを振ってそこから
>値を取得→正誤判定するということでしょうか?
すでに要素も値も取得できているのですから、そんな必要はありません。
例えば、
>let os = this.value;
の次に、
if(os) this.style.visibility = 'hidden';
の1行を追加しておけば、ひとまず、ご質問のようになるかと。
ただし、非表示にするだけで、イベント設定等はそのままです。
あれからコードを変更したのですが、設計がわからないためアドバイス頂けると助かります。
コードを組む難易度も教えていただけると助かります。
No.1
- 回答日時:
こんばんは
>1つめのボックスを見えなくしたいのですが、どのように組めばいいでしょうか?
初期設定でもイベント処理を利用しているようなので・・
イベント処理内で、値が""でないことを条件に、要素の style.visibility = 'hidden' に設定しておけばよいのではないでしょうか?
display = 'none' でも良いですけれど、その場合は表示レイアウトが詰められます。
回答ありがとうございます。
値が""でないことを条件にということなのですが、値というのは<select name="OS">にidを振ってそこから値を取得→正誤判定するということでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンで選択した項目にあ...
-
セレクトメニューの値をクッキ...
-
同じ名前のセレクトがある場合...
-
<input>の選択肢をプルダウンメ...
-
javascript-変数がよくわかりま...
-
<select> をmultiple にしてい...
-
2つのプルダウンメニューで、同...
-
javascriptでセレクトボックス...
-
VBScriptでHTMLのセレクトボッ...
-
return trueとreturn falseの用...
-
Selectボックスの幅を自動で広...
-
onchangeイベントを強制的に発...
-
ラジオボタンにタブインデック...
-
ブラウザの外にあるマウスの情...
-
TextBoxに半角数字以外を入れた...
-
【掲示板の機能】投稿時にサイ...
-
RegularExpressionValidatorの...
-
【javascript・PHP】プルダウン...
-
至急!GetElementById でtdの...
-
javascriptで画像をテーブルに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
javascriptでoptionタグを削除...
-
プルダウン選択を変更すると、...
-
2段階プルダウンで1段階目の選...
-
セレクトボックスで配列を呼び...
-
ラジオボタンとプルダウンを連...
-
【JavaScript】プルダウンで数...
-
スマホのフォームでのselect複...
-
二つのセレクトボックス間での...
-
3つの連動したプルダウンメニュ...
-
プルダウンを選択していないと...
-
2つのプルダウンメニューで、同...
-
selectを変更不可にしたい
-
Selectボックスの一覧表示方法
-
webページの一部のみの更新につ...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
javascriptでセレクトボックス...
-
コードレビューをお願いします。
-
selectタグで日付を生成
おすすめ情報