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

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

ただいまの
回答率

88.63%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,582

nemud

score 20

 前提・実現したいこと

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

 該当のソースコード

  <div id="countBox">
    <div id="startBox"></div>
  </div>
  <form name="fmname" id="form">
    <select name="selBoxA" id="selidA" height="10vh">
        <option value="">Count</option>
    </select>
    <select name="selBoxB" id="selidB" height="10vh">
        <option value="">Set</option>
    </select>
    <select name="selBoxC" id="selidC" height="10vh">
        <option value="">Interval</option>
    </select>
selidChangeCount.onchange = function(){
  clearInterval(timer_flg);
  timer_flg = null;
  selidA = this.options[ this.selectedIndex ];
  setCountA = selidA.value;
  clickCount = setCountA;
  seting_view_css();
  countUp.innerHTML = clickCount;
  console.log(clickCount);
 }

 selidChangeSet.onchange = function(){
   selidB = this.options[ this.selectedIndex ];
   setCountB = selidB.value;
   console.log(setCountB);
 }

 selidChangeTime.onchange = function(){
  selidC = this.options[ this.selectedIndex ];
  setCountC = selidC.value;
  setCountC = setCountC*100;
  console.log(setCountC);
 }

 試したこと

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/10/31 18:07

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

    キャンセル

回答 3

checkベストアンサー

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 18:56

    ありがとうございます!
    丸々コピペしてみたら意図した動きになりました。

    form要素にchangeイベントをつけると、子要素の変更が取得できるという情報を見つけて何度かトライしたのですが、セレクトボックスのどれか一つでも変更すると全部変更されたことになってしまって、上手く使えずにいました。

    ーーーーーーーー
    試してみたこと
    ーーーーーーーー
    document.forms['fmname'].addEventListener('change', function(event) {
    if(setCountA == "" || setCountB == "" || setCountC == ""){
    startBox.innerHTML = "選択してください";
    }else{
    startBox.innerHTML = "START!";
    }
    });
    ーーーーーーーー
    この書き方だとなぜ上手く行かなかったのでしょうか。
    よろしければご教授いただけると幸いです。

    キャンセル

  • 2018/11/01 09:23

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

    キャンセル

  • 2018/11/01 11:43

    ご返信ありがとうございます!

    変更した際にその値を入れる変数を「var setCountA;」とあらかじめ用意していて、私はその変数setCountAをそのまま使えば行けるんじゃないかと思っていました。

    もう一度取り直さないといけないのですね。
    また一つ勉強になりました。
    ありがとうございます!

    キャンセル

+1

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.s'),function(x){
    x.addEventListener('change',function(x){
      document.querySelector('#startbox').textContent=
        ([].filter.call(document.querySelectorAll('.s'),function(x){
          return x.selectedIndex==0;
        }).length==0)?"START":"SELECT";
    });
  });
});
</script>
<div id="countBox">
<div id="startBox">SELECT</div>
</div>
<form name="fmname" id="form">
<select name="selBoxA" id="selidA" height="10vh" class="s">
<option value="">Count</option>
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a3">a3</option>
</select>
<select name="selBoxB" id="selidB" height="10vh" class="s">
<option value="">Set</option>
<option value="b1">b1</option>
<option value="b2">b2</option>
<option value="b3">b3</option>
</select>
<select name="selBoxC" id="selidC" height="10vh" class="s">
<option value="">Interval</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 19:14 編集

    ありがとうございます!
    <option>まで追加していただいて。。

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

    また何か分からない事がありましたらご教授いただけますと幸いです。

    キャンセル

+1

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

デモ: JSFiddle

<body>
    <div>
        <div id="startBox">選択してください</div>
    </div>
    <form>
        <select height="10vh">
            <option value='' disabled selected style='display:none;'>選択してください</option>
            <option value='xxx'>Count</option>
        </select>
        <select height="10vh">
            <option value='' disabled selected style='display:none;'>選択してください</option>
            <option value='yyy'>Set</option>
        </select>
        <select height="10vh">
            <option value='' disabled selected style='display:none;'>選択してください</option>
            <option value='zzz'>Interval</option>
        </select>
    </form>

    <script>
        function onChange(event) {
            let selects = document.querySelectorAll('select');
            let isSelectedAll = Array.from(selects).every(o => o.value != '');
            if (isSelectedAll)
                document.querySelector('#startBox').textContent = 'Start';
        }

        // イベントを登録します
        Array
            .from(document.querySelectorAll('select'))
            .forEach(o => o.addEventListener('change', onChange));
    </script>
</body>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/01 11:53

    ご返信ありがとうございます!

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

    キャンセル

  • 2018/11/01 12:15

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

    キャンセル

  • 2018/11/01 13:41

    ありがとうございます!

    キャンセル

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

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る