質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2871閲覧

セレクトボックスのonchangeで入力チェックをしたいです

nemud

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/10/31 09:04

編集2018/10/31 09:17

前提・実現したいこと

javascript初心者です。
HTMLで3つのセレクトボックスを設置していて、JavaScriptの”onchange”でvalue値を取得しています。
全てのセレクトボックスを選択し終わったら、「START」という文字を表示させたいのですが、
どのような方法で選択されたかどうかの判別をしたら良いのか分からないので、ご教授いただきたいです。

該当のソースコード

HTML

1 <div id="countBox"> 2 <div id="startBox"></div> 3 </div> 4 <form name="fmname" id="form"> 5 <select name="selBoxA" id="selidA" height="10vh"> 6 <option value="">Count</option> 7 </select> 8 <select name="selBoxB" id="selidB" height="10vh"> 9 <option value="">Set</option> 10 </select> 11 <select name="selBoxC" id="selidC" height="10vh"> 12 <option value="">Interval</option> 13 </select>

Javascript

1selidChangeCount.onchange = function(){ 2 clearInterval(timer_flg); 3 timer_flg = null; 4 selidA = this.options[ this.selectedIndex ]; 5 setCountA = selidA.value; 6 clickCount = setCountA; 7 seting_view_css(); 8 countUp.innerHTML = clickCount; 9 console.log(clickCount); 10 } 11 12 selidChangeSet.onchange = function(){ 13 selidB = this.options[ this.selectedIndex ]; 14 setCountB = selidB.value; 15 console.log(setCountB); 16 } 17 18 selidChangeTime.onchange = function(){ 19 selidC = this.options[ this.selectedIndex ]; 20 setCountC = selidC.value; 21 setCountC = setCountC*100; 22 console.log(setCountC); 23 }

試したこと

Javascript

1//選択されたかどうかのチェック 2 if(setCountA == "" || setCountB == "" || setCountC == ""){ 3   startBox.innerHTML = "選択してください"; 4 }else{ 5   startBox.innerHTML = "START!"; 6 }

補足情報(FW/ツールのバージョンなど)

試した結果、ページを表示させた時はまだ選択していない状態なので、「選択してください」となるところ、「START」の表示になってしまうので判定が正しく動いていないようです。

選択を変更したらvalue値が都度変更されるようにしていて、
セレクトボックス以外に送信ボタンなどは設置していないのですが、チェック用に他に何か設置したほうが良いのでしょうか?
できれば、セレクトボックスのみで実装したいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/10/31 09:07

「試したこと」がどの部分にかかれているかがわからないため、書かれている状況が再現するコード(HTML/JavaScript)を提示されたほうが回答を得やすいと思います。
guest

回答3

0

ベストアンサー

JavaScript

1document.forms['fmname'].addEventListener('change', function(event) { 2 var setCountA = this.elements['selBoxA'].value; 3 var setCountB = this.elements['selBoxB'].value; 4 var setCountC = this.elements['selBoxC'].value; 5 // 以下、判定処理。 6}, false);

投稿2018/10/31 09:28

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nemud

2018/10/31 09:56

ありがとうございます! 丸々コピペしてみたら意図した動きになりました。 form要素にchangeイベントをつけると、子要素の変更が取得できるという情報を見つけて何度かトライしたのですが、セレクトボックスのどれか一つでも変更すると全部変更されたことになってしまって、上手く使えずにいました。 ーーーーーーーー 試してみたこと ーーーーーーーー document.forms['fmname'].addEventListener('change', function(event) { if(setCountA == "" || setCountB == "" || setCountC == ""){ startBox.innerHTML = "選択してください"; }else{ startBox.innerHTML = "START!"; } }); ーーーーーーーー この書き方だとなぜ上手く行かなかったのでしょうか。 よろしければご教授いただけると幸いです。
x_x

2018/11/01 00:23

突然変数setCountA等が出てきていますが、変更があるはずなので取り直さないとだめです。
nemud

2018/11/01 02:43

ご返信ありがとうございます! 変更した際にその値を入れる変数を「var setCountA;」とあらかじめ用意していて、私はその変数setCountAをそのまま使えば行けるんじゃないかと思っていました。 もう一度取り直さないといけないのですね。 また一つ勉強になりました。 ありがとうございます!
guest

0

こんな感じ?(機能にいらない属性は一旦消してます)

デモ: JSFiddle

html

1<body> 2 <div> 3 <div id="startBox">選択してください</div> 4 </div> 5 <form> 6 <select height="10vh"> 7 <option value='' disabled selected style='display:none;'>選択してください</option> 8 <option value='xxx'>Count</option> 9 </select> 10 <select height="10vh"> 11 <option value='' disabled selected style='display:none;'>選択してください</option> 12 <option value='yyy'>Set</option> 13 </select> 14 <select height="10vh"> 15 <option value='' disabled selected style='display:none;'>選択してください</option> 16 <option value='zzz'>Interval</option> 17 </select> 18 </form> 19 20 <script> 21 function onChange(event) { 22 let selects = document.querySelectorAll('select'); 23 let isSelectedAll = Array.from(selects).every(o => o.value != ''); 24 if (isSelectedAll) 25 document.querySelector('#startBox').textContent = 'Start'; 26 } 27 28 // イベントを登録します 29 Array 30 .from(document.querySelectorAll('select')) 31 .forEach(o => o.addEventListener('change', onChange)); 32 </script> 33</body>

投稿2018/10/31 09:59

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nemud

2018/10/31 10:50

デモまで作っていただいて、ありがとうございます! こうゆう方法もあるのですね! onchangeイベントじゃなくても、イベントを別に登録して changeイベントで発火させる(?)方法も参考になりました。 また他のイベントを作成する時に、こちらの手法も参考にさせていただきたいと思います。 また何か分からない事がありましたらご教授いただけますと幸いです。
退会済みユーザー

退会済みユーザー

2018/10/31 10:53

ちゃんと調べたわけじゃないのですが、.onchange = ... はイベントリスナーを1つしか登録できず、新たに登録しようとすると上書きしちゃうので、addevent...が推奨されているとかいないとか。ただ、addevent....は古いブラウザでは使えなかったりもするそうです。
nemud

2018/11/01 02:53

ご返信ありがとうございます! >.onchange = ... はイベントリスナーを1つしか登録できず・・・ そうなんです。それもあってonchangeを3つも書いていているので、 changeイベントを使ってもう少しスッキリさせたいと思いました。 addevent...の情報もありがとうございます! こちらも、調べてみて代用できそうだったらトライしてみたいと思います。
退会済みユーザー

退会済みユーザー

2018/11/01 03:15

はい。ちなみに、別々の要素に対してであれば登録できたかと(未確認)
nemud

2018/11/01 04:41

ありがとうございます!
guest

0

Javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 [].forEach.call(document.querySelectorAll('.s'),function(x){ 4 x.addEventListener('change',function(x){ 5 document.querySelector('#startbox').textContent= 6 ([].filter.call(document.querySelectorAll('.s'),function(x){ 7 return x.selectedIndex==0; 8 }).length==0)?"START":"SELECT"; 9 }); 10 }); 11}); 12</script> 13<div id="countBox"> 14<div id="startBox">SELECT</div> 15</div> 16<form name="fmname" id="form"> 17<select name="selBoxA" id="selidA" height="10vh" class="s"> 18<option value="">Count</option> 19<option value="a1">a1</option> 20<option value="a2">a2</option> 21<option value="a3">a3</option> 22</select> 23<select name="selBoxB" id="selidB" height="10vh" class="s"> 24<option value="">Set</option> 25<option value="b1">b1</option> 26<option value="b2">b2</option> 27<option value="b3">b3</option> 28</select> 29<select name="selBoxC" id="selidC" height="10vh" class="s"> 30<option value="">Interval</option> 31<option value="c1">c1</option> 32<option value="c2">c2</option> 33<option value="c3">c3</option> 34</select>

投稿2018/10/31 09:52

yambejp

総合スコア114574

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nemud

2018/10/31 10:50 編集

ありがとうございます! <option>まで追加していただいて。。 forEachやfilterを使う方法もあるのですね! まだまだ勉強不足で、一つ一つ見ていくと何となくやっている事はわかるのですが、「function(e){[]・・・」の[]が何の役割があるのか理解できずで… こちらも使いこなせるようにもう少し掘り下げて勉強してみます。 また何か分からない事がありましたらご教授いただけますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問