HTMLでselectboxと同時にlabelも一緒に隠したい

HTMLとjavascriptを使ってselectboxを作成しました
１つ目の項目に’有り’と入れると次のselectboxが表示されるようになっています。
selectboxのみでしたらうまくいったのですが、labelを入れたらlabelは、はじめから非表示にならず
全部出てしまっています。１つ目のバス希望は出ていていいのですが、残りのバスルート及び停留所は、バス希望有りにしないと出ないようにしたいのですが、、、
おまけに項目の必須条件、（入れ忘れ防止）の’正しく入力してください’の文字は全てのselectboxではじめから出てしまっております。
javascripに追加のcodeを入れるところまでは調べてわかったのですが、書き方がよくわからず
詰まっております。
⑴バス希望有り→バスルートのlabelとselectboxが表示される
⑵バスルートを選択すると→停留所のlabelとselectboxが表示される
⑶３つのselectboxに選択がない場合のみ、正しく入力してくださいが出るようにしたい→現在は全て出たままになってしまう
どなたかわかる方教えていただけますか？

HTML
1<head>
2  <meta charset="UTF-8">
3  <title>formrun.js - Confirm mode</title>
4  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
5  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script>
6  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
7  <script src="https://sdk.form.run/js/v2/formrun.js"></script>
8</head>
9
10<body>
11
12<div class="container">
13  <h1>formrun.js <small> - Confirm mode</small></h1>
14
15  <div class="card">
16    <h3 class="card-header" data-formrun-hide-if-confirm>フォームを入力してください</h3>
17    <h3 class="card-header" data-formrun-show-if-confirm>確認画面</h3>
18
19    <div class="card-block">
20      <form class="formrun" action="#" method="get" data-formrun-confirm>
21        <div class="form-group row"
22            data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="お名前">
23          <label class="col-xs-3 col-form-label" for="name">お名前</label>
24          <div class="col-xs-9" data-formrun-hide-if-confirm>
25            <input type="text" class="form-control" id="name" name="お名前"
26                  data-formrun-required data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
27            <div class="text-danger" data-formrun-show-if-error="お名前">お名前を正しく入力してください</div>
28          </div>
29          <div class="col-xs-9" data-formrun-show-if-confirm>
30            <span data-formrun-confirm-value="お名前"></span>
31          </div>
32        </div>
33
34<div class="form-group row">
35          <label class="form-control-label">バス希望   <span class="haveto">必須</span></label>
36          <div class="form-control-label" data-formrun-hide-if-confirm>
37
38<select class="form-control" name="バス希望" data-child="#1">
39  <option value="" selected="selected">選択してください</option>
40  <option value="希望有り">希望有り</option>
41  <option value="希望無し">希望無し</option>
42</select>
43<span class="text-danger" data-formrun-show-if-error="バス希望">正しく入力してください</span>
44          </div>
45          <div class="cp_iptxt" data-formrun-show-if-confirm>
46            <span data-formrun-confirm-value="バス希望"></span>
47          </div>
48        </div>
49
50
51<div class="form-group row">
52          <label class="form-control-label">バスルート   <span class="haveto">必須</span></label>
53          <div class="form-control-label" data-formrun-hide-if-confirm>
54
55<select class="form-control children" id="1" name="バスルート" data-child="#2">
56  <option value="" selected="selected">ルートを選択してください</option>
57  <option value="①ルート" data-val="希望有り">①ルート</option>
58  <option value="②ルート" data-val="希望有り">②ルート</option>
59</select>
60<span class="text-danger" data-formrun-show-if-error="バスルート">正しく入力してください</span>
61          </div>
62          <div class="cp_iptxt" data-formrun-show-if-confirm>
63            <span data-formrun-confirm-value="バスルート"></span>
64          </div>
65        </div>
66
67
68<div class="form-group row">
69          <label class="form-control-label">停留所   <span class="haveto">必須</span></label>
70          <div class="form-control-label" data-formrun-hide-if-confirm>
71
72<select class="form-control children" id="2" name="停留所">
73  <option value="" selected="selected">停留所を選択してください</option>
74  <option value="交差点先" data-val="①ルート">交差点先</option>
75  <option value="ポルシェ前" data-val="①ルート">ポルシェ前</option>
76  <option value="南郵便局前" data-val="①ルート">南郵便局前</option>
77<option value="動物病院前" data-val="②ルート">動物病院前</option>
78<option value="マンション前" data-val="②ルート">マンション前</option>
79<option value="幼稚園前" data-val="②ルート">幼稚園前</option>
80</select>
81<span class="text-danger" data-formrun-show-if-error="停留所">正しく入力してください</span>
82          </div>
83          <div class="cp_iptxt" data-formrun-show-if-confirm>
84            <span data-formrun-confirm-value="停留所"></span>
85          </div>
86        </div>
87<div>
88          <a href="javascript:void(0)" class="btn btn-secondary" data-formrun-back-button>戻る</a>
89          <button type="submit" class="btn btn-primary pull-xs-right" data-formrun-error-text="未入力の項目があります" data-formrun-send-text="送信する" data-formrun-submitting-text="送信中...">確認</button>
90        </div>
91      </form>
92    </div>
93  </div>
94  
95</div><!-- /.container -->
96
97</body>
98</html>
99

javascript
1<script>
2$('.form-control').on('change', function(){
3    let $this = $(this),
4        child = $this.data('child'),
5        val = $this.val();
6
7    if (val) {
8        let op_cnt = 0;
9        $(child).find('option').each(function(){
10            let op = $(this);
11            if ( ! op.data('val') || op.data('val') == val) {
12                if (op.closest('span.hide').length) {
13                    op.unwrap();
14                }
15
16                if (op.data('val') == val) {
17                    op_cnt ++;
18                }
19            } else {
20                if ( ! op.closest('span.hide').length) {
21                    op.wrap('<span class="hide">');
22                }
23            }
24        });
25
26        if (op_cnt) {
27            $(child).show();
28        } else {
29            $(child).val('').hide().change();
30        }
31    } else {
32        $(child).val('').hide().change();
33    }
34});
35</script>

CSS
1body {
2  padding: 50px 0 100px;
3}

Jon_do

2020/12/19 16:10

状況が再現できるコードに修正してください。今のままでは何も動きません。

nobinomio

2020/12/20 13:10

訂正してみましたがいかがでしょうか

行動規範の内容に同意します

回答2件

ベストアンサー

html
1<body>
2    <div class="container">
3        <h1>formrun.js <small> - Confirm mode</small></h1>
4
5        <div class="card">
6            <h3 class="card-header" data-formrun-hide-if-confirm>フォームを入力してください</h3>
7            <h3 class="card-header" data-formrun-show-if-confirm>確認画面</h3>
8
9            <div class="card-block">
10                <form class="formrun" action="#" method="get" data-formrun-confirm>
11                    <div class="form-group row" data-formrun-class-if-success="has-success"
12                        data-formrun-class-if-error="has-danger" data-formrun-target="お名前">
13                        <label class="col-xs-3 col-form-label" for="name">お名前 <span class="haveto">必須</span></label>
14                        <div class="col-xs-9" data-formrun-hide-if-confirm>
15                            <input type="text" class="form-control" id="name" name="お名前" data-formrun-required
16                                data-formrun-class-if-success="form-control-success"
17                                data-formrun-class-if-error="form-control-danger">
18                            <div class="text-danger" data-formrun-show-if-error="お名前">お名前を正しく入力してください</div>
19                        </div>
20                        <div class="col-xs-9" data-formrun-show-if-confirm>
21                            <span data-formrun-confirm-value="お名前"></span>
22                        </div>
23                    </div>
24
25                    <div class="form-group row">
26                        <label class="form-control-label">バス希望 <span class="haveto">必須</span></label>
27                        <div class="form-control-label" data-formrun-hide-if-confirm>
28
29                            <select class="form-control" name="バス希望" data-child="#1">
30                                <option value="" selected="selected">選択してください</option>
31                                <option value="希望有り">希望有り</option>
32                                <option value="希望無し">希望無し</option>
33                            </select>
34                            <span class="text-danger" data-formrun-show-if-error="バス希望">正しく入力してください</span>
35                        </div>
36                        <div class="cp_iptxt" data-formrun-show-if-confirm>
37                            <span data-formrun-confirm-value="バス希望"></span>
38                        </div>
39                    </div>
40
41
42                    <div class="form-group row">
43                        <label class="form-control-label">バスルート <span class="haveto">必須</span></label>
44                        <div class="form-control-label" data-formrun-hide-if-confirm>
45
46                            <select class="form-control children" id="1" name="バスルート" data-child="#2">
47                                <option value="" selected="selected">ルートを選択してください</option>
48                                <option value="①ルート" data-val="希望有り">①ルート</option>
49                                <option value="②ルート" data-val="希望有り">②ルート</option>
50                            </select>
51                            <span class="text-danger" data-formrun-show-if-error="バスルート">正しく入力してください</span>
52                        </div>
53                        <div class="cp_iptxt" data-formrun-show-if-confirm>
54                            <span data-formrun-confirm-value="バスルート"></span>
55                        </div>
56                    </div>
57
58
59                    <div class="form-group row">
60                        <label class="form-control-label">停留所 <span class="haveto">必須</span></label>
61                        <div class="form-control-label" data-formrun-hide-if-confirm>
62                            <select class="form-control children" id="root1" name="停留所">
63                                <option value="" selected="selected">停留所を選択してください</option>
64                                <option value="交差点先" data-val="①ルート">交差点先</option>
65                                <option value="ポルシェ前" data-val="①ルート">ポルシェ前</option>
66                                <option value="南郵便局前" data-val="①ルート">南郵便局前</option>
67                            </select>
68                            <select class="form-control children" id="root2" name="停留所">
69                                <option value="" selected="selected">停留所を選択してください</option>
70                                <option value="動物病院前" data-val="②ルート">動物病院前</option>
71                                <option value="マンション前" data-val="②ルート">マンション前</option>
72                                <option value="幼稚園前" data-val="②ルート">幼稚園前</option>
73                            </select>
74                            <span class="text-danger" data-formrun-show-if-error="停留所">正しく入力してください</span>
75                        </div>
76                        <div class="cp_iptxt">
77                            <span class="busStop"></span>
78                        </div>
79                    </div>
80                    <div>
81                        <a href="javascript:void(0)" class="btn btn-secondary" data-formrun-back-button>戻る</a>
82                        <button type="submit" class="btn btn-primary pull-xs-right"
83                            data-formrun-error-text="未入力の項目があります" data-formrun-send-text="送信する"
84                            data-formrun-submitting-text="送信中...">確認</button>
85                    </div>
86                </form>
87            </div>
88        </div>
89    </div>
90    <script>
91        const select = document.getElementsByClassName("form-control");
92        const selectWrap = document.getElementsByClassName("form-group");
93        const btn = document.getElementsByClassName("btn-primary")[0];
94        const attention = document.getElementsByClassName("text-danger");
95        const attentionLen = attention.length;
96        const must = document.getElementsByClassName("haveto");
97        const mustLen = must.length
98        const children2 = document.getElementsByClassName("children")[1];
99        const root1 = document.getElementById("root1");
100        const root2 = document.getElementById("root2");
101        const busStop = document.getElementsByClassName("busStop")[0];
102
103        select[1].addEventListener("change", () => {
104            if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
105            if (select[1].value == "希望無し") selectWrap[2].style.display = "", selectWrap[3].style.display = "";
106            if (select[1].value == "希望有り" || select[1].value == "希望無し") {
107                attention[1].style.display = "none";
108            }
109        });
110
111        select[2].addEventListener("change", () => {
112            select[3].value = "";
113            select[4].value = "";
114            if (select[2].value == "①ルート") {
115                selectWrap[3].style.display = "block";
116                attention[2].style.display = "none";
117                root1.style.display = "block"
118                root2.style.display = "none"
119            } else if (select[2].value == "②ルート") {
120                selectWrap[3].style.display = "block";
121                attention[2].style.display = "none";
122                root1.style.display = "none"
123                root2.style.display = "block"
124            }
125        });
126
127        select[3].addEventListener("change", () => {
128            if (!(select[2].value == "")) attention[3].style.display = "none";
129        });
130
131        btn.addEventListener("click", (e) => {
132            for (let i = 0; i < mustLen; i++) {
133                must[i].style.display = "none";
134            }
135
136            if (root1.style.display == "block") {
137                busStop.innerText = root1.value;
138            } else {
139                busStop.innerText = root2.value;
140            }
141
142            if (select[1].value == "" && select[0].value == "") {
143                attention[0].style.display = "block";
144                attention[1].style.display = "block";
145                e.preventDefault();
146            } else if (select[1].value == "希望無し" && !(select[0].value == "")) {
147                for (let i = 0; i < attentionLen; i++) {
148                    attention[i].style.display = "none";
149                }
150                return true;
151            } else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "" && select[4].value == "") {
152                setTimeout(() => {
153                    btn.innerText = "未入力の項目があります"
154                }, 200);
155                for (let i = 0; i < attentionLen; i++) {
156                    if (select[i].value == "") {
157                        attention[i].style.display = "block";
158                    }
159                }
160                e.preventDefault();
161            }
162        });
163
164        const returnBtn = document.getElementsByClassName("btn-secondary")[0];
165
166        returnBtn.addEventListener("click", () => {
167            busStop.innerText = "";
168            for (let i = 0; i < mustLen; i++) {
169                must[i].style.display = "inline";
170            }
171        });
172
173    </script>
174
175</body>

投稿2020/12/20 15:48

編集2020/12/27 06:53

Jon_do

総合スコア1373

nobinomio

2020/12/25 02:21 編集

Jon_do様ありがとうございます。試してみました。ルートのところまではうまく動いたのですが、停留所は①ルート、②ルート、どちらを選択しても同じものが出てしまいます。select[3]のcodeに何か抜けていますでしょうか？ jqueryはこちらを入れようと思ったのですが、 https://fit-jp.com/selectbox-jq/ CDNの記述がなく、直にサーバーに置かなきゃいけないので、断念してしまいました。

Jon_do

2020/12/25 03:29

ルート選択があるのを見逃してました。回答を編集しましたのでまるごとコピペで動きます。

Jon_do

2020/12/25 03:34

jqueryなら読み込まれてました。 headタグのこの部分がその記述です。 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script>

nobinomio

2020/12/26 15:57 編集

Jon_do様実装してみました。PCではうまくいきますが、何故か携帯iphoneでやるとバスルートが①でも②でも全て選択できるようになってしまいます。ブラウザによってcodeが違いますでしょうか？

Jon_do

2020/12/27 06:51

safariの仕様でした。コード書き換えました。 safariのみoptionにdisplay:noneは効かないそうです。

Jon_do

2020/12/27 06:54

文字数制限に引っかかったのでbodyタグのみになっています。前回のコードのbody部分をそのまま入れ替えればokです。

nobinomio

2020/12/28 02:13 編集

Jon_do様 body部分を入れ替えてみたのですが、今度はバスルートを希望有りにしても次のselectboxが出なくなってしまいました select[2].のfor文が抜けてるとかでしょうか？使っているwordpressのせいでしょうか？すいません素人で変更箇所は確認できているのですが。。。どこを直せば直るのかわからずです

Jon_do

2020/12/28 02:27

ワードプレスなしで試してみてそれでちゃんと動いたらワードプレス側に問題があるということになります。

Jon_do

2020/12/28 02:50 編集

https://f.easyuploader.app/eu-prd/upload/20201228113736_574c44736845575369684b6b31716a78.html 動作するサンプル。htmlの構成を少し変えてるので送信した場合の動作はphp側を弄る必要があります。

行動規範の内容に同意します