下記コードに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で質問しましょう!
似たような質問が見つかりました
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- 船舶・クルーズ Windows10のエクスプローラにて。 1 2022/10/10 20:11
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- iPod・ウォークマン・音楽プレーヤー インターネットに接続できるAndroid OS版のmp4プレーヤーを買おうと思っています。 6 2022/05/28 22:10
- 工学 都市ガスの燃焼速度 3 2022/08/03 12:59
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- Windows 10 OSドライブのセキュアワイプ 2 2023/01/24 23:49
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- Excel(エクセル) [スライサー]に関して、 1 2022/05/24 21:07
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
2段階連動セレクトボックスでの...
-
phpと連動させるには?
-
<select> select...
-
全てのselect要素をデフォルト...
-
プルダウンからの背景色変更
-
return falseが効かない
-
まったく同じ<select>フォーム...
-
javascriptでセレクトボックス...
-
Pythonで会員サイトの自動ログ...
-
現在時刻を取得してフォームのs...
-
テキストボックスに入力された...
-
フォームの一部をPOSTで送信で...
-
this.formがundefined
-
正規表現で複数マッチ条件で悩...
-
複数のフォームを一括で自動送...
-
Selenium.ChromeDriverの使い方...
-
クリックさせたいが、click()が...
-
【掲示板の機能】投稿時にサイ...
-
追加ボタンを押した際に ok ボ...
-
クリック→フォーカスのある場所...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
JavaScriptで<select>の<option...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
【JS】selectでchangeした時の...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
同じ名前のセレクトがある場合...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
-
【javascript】連想配列からセ...
-
3つのselectでURLパラメータを...
-
複数のプルダウンを1つにまとめ...
-
selectボックスで選択数を制限...
-
セレクトボックスで配列を呼び...
おすすめ情報