
下記コードに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>の選択肢をプルダウンメ...
-
同じ名前のセレクトがある場合...
-
ラジオボタンの選択に応じてプ...
-
プルダウン選択を変更すると、...
-
Selectボックスの幅を自動で広...
-
javaScriptの変数をJavaの変数...
-
JavaScriptのfileオブジェクト...
-
<JavaScript>tableタグを入力不...
-
ASP.NETでNAME属性を固定にしたい
-
RegularExpressionValidatorの...
-
クリックされた罫表セルの行番...
-
onchangeイベントを強制的に発...
-
プルダウンで選択された値を別...
-
二次元配列に数字をランダムに...
-
sessionの値でボタンを活性・非...
-
JQueryで2つのテキストフィー...
-
cookie使用時にundefinedと表示...
-
doPostBack 関数について
-
【FORM】 リンク文字で submit...
-
tableの任意行にfocusをあてる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
javascriptでoptionタグを削除...
-
プルダウン選択を変更すると、...
-
2段階プルダウンで1段階目の選...
-
セレクトボックスで配列を呼び...
-
ラジオボタンとプルダウンを連...
-
【JavaScript】プルダウンで数...
-
スマホのフォームでのselect複...
-
二つのセレクトボックス間での...
-
3つの連動したプルダウンメニュ...
-
プルダウンを選択していないと...
-
2つのプルダウンメニューで、同...
-
selectを変更不可にしたい
-
Selectボックスの一覧表示方法
-
webページの一部のみの更新につ...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
javascriptでセレクトボックス...
-
コードレビューをお願いします。
-
selectタグで日付を生成
おすすめ情報