jQueryでクラスの表示・非表示を行いたいです。

前提・実現したいこと

jQueryでクラスの表示・非表示を行いたいです。
本来ならば、入力フォーム欄を増やす処理を作ろうとしてましたが、「隠した方が処理が楽」という回答を見て表示・非表示に変えました。
こちらの質問を参考に表示・非表示させようと思ったのですが現在、Djangoを使ってフォームを作成しているのですが、参考サイトの質問と違いtableを使用していませんので、要所要所を変更ながら書いたのですが上手くいかず質問させていただきました。

１、jQueryはtable以外でclassを使った場合でも表示・非表示は可能ですか？

該当のソースコード

html
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2    <form method="POST">
3      <div class="row">
4          <div class="col-sm-12">
5          {% csrf_token %}
6          {{ form | crispy }}
7        <dt>投票箱の数<input type="button" value="Get ">
8        <select id="s1">
9        <option value="box1">1</option>
10        <option value="box2">2</option>
11        <option value="box3">3</option>
12        </select>
13        </dt>
14        </div>
15        <div class="box">
16          <div class="col-sm-4">
17            <div class="box1 box2 box3">
18            <h5>{{ form.formset | crispy}}</h5>
19            <h5>{{ formset.management_form }}</h5>
20            </div>
21          </div>
22          <div class="col-sm-4">
23            <div class="box2 box3">
24            <h5>{{ form.formset | crispy}}</h5>
25            <h5>{{ formset.management_form }}</h5>
26            </div>
27          </div>
28          <div class="col-sm-4">
29            <div class="box3">
30            <h5>{{ form.formset | crispy}}</h5>
31            <h5>{{ formset.management_form }}</h5>
32            </div>
33          </div>
34        </div>
35      </div>
36      <button type="submit">Submit</button>
37      </form>
38<script>
39HTMLElement.prototype.trigger=function(eventStr){
40    var e = document.createEvent("HTMLEvents");
41    e.initEvent(eventStr, true, true );
42    return this.dispatchEvent(e);
43};
44
45window.addEventListener('DOMContentLoaded', ()=>{
46  document.querySelector("#s1").addEventListener('change',e=>{
47    var v=e.target.value;
48    [].forEach.call(document.querySelectorAll("v2,.v3"),x=>{
49      var flg=x.classList.contains(v);
50      x.style.display=flg?"box-row":"none";
51      [].forEach.call(x.querySelectorAll('input'),y=>{
52        y.disabled=!flg;
53      });
54    });
55  });
56  document.querySelector("#s1").trigger('change');
57});
58</script>

試したこと

tableの場所をclassの名前に変更して書いたのですが、box2とbox3が非表示にならず、最初から全て表示されてしまいます。
2,どうすればクラスの表示・非表示が出来ますか？
参考サイトなども教えていただければ幸いです。よろしくお願いいたします。

追記

base.htmlと連動して表示をした場合、boxの表示・非表示が実行できませんでした。
base.htmlと連動して変更した箇所は、body直下をclass="container"で囲ってる所だと思います。

base.html連動なし

base.html連動

base.htmlのjQueryなどのバージョンも確認したのですが、おかしな箇所は見つけられませんでした。

html
1{% load static %}
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
11    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
12
13    <title>会員登録サンプル</title>
14</head>
15<body>
16    <!-- メインコンテント -->
17    <div class="container">
18        {% block content %}{% endblock %}
19    </div>
20
21    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
22    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
23            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
24            crossorigin="anonymous"></script>
25    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
26            integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
27            crossorigin="anonymous"></script>
28    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
29            integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
30            crossorigin="anonymous"></script>
31    <script src="{% static 'app/js/plugins/responsive-paginate.js' %}"></script>
32    <script src="{% static 'app/js/app.js' %}"></script>
33
34</body>
35</html>

他に必要なコードがあれば追記させていただきますのでよろしくお願いいたします。

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

回答3件

ベストアンサー

[].forEach.call(document.querySelectorAll("v2,.v3"),x=>{
ご提示のコードの中に v2.v3 に該当する要素はありません。 .box2,.box3 ならあります。

x.style.display=flg?"box-row":"none";
display に設定できる値に box-row というキーワードはありません。 table-row ならありますが、 table-row はその名の通り、tableの行であることを示していますので、たんに表示・非表示を切り替えたいだけならblankにするのがよいでしょう。

そもそも非表示にするならbox2, box3などを持つdivではなく、その上の.col-sm-4から消したほうがいいと思いますが……（好みの問題かもしれません）
あと、慣れないうちから短すぎる変数名を使うのはやめましょう。

js
1window.addEventListener('DOMContentLoaded', () => {
2  document.querySelector('#s1').addEventListener('change', evt => {
3    const val = evt.target.value;
4
5    // 表示・非表示を切り替える対象は .col-sm-4 のdiv (= .box直下のdiv)
6    document.querySelectorAll('.box > div').forEach(box => {
7
8      // 判別に使うdivはすべてbox3を持っているので、クエリは.box3だけでよい
9      const isShown = box.querySelector('.box3').classList.contains(val);
10
11      // '' を指定するとnoneが外れる
12      box.style.display = isShown? '' : 'none';
13    });
14  });
15  document.querySelector('#s1').trigger('change');
16});