select boxのchangeに反応して発火するモーダルウィンドウについて

Question

select boxを選ぶとjQueryによってモーダルウィンドウが発火するというイベントを実行すると、「何も反応しない」という問題で困っています。

原因または解決策をご存知の方はいらっしゃいませんか。

私の行った手順は以下です。
(1)「#modal01」というidを持つselect boxを用意した
(2) #modal01というidを持つselect boxの中身が変わったら、jQueryでモーダルウィンドウが表示されるようにした

しかし、実際にselect boxの中身を変えてみても、設定したmodalウィンドウが発火しません。

私はモーダルウィンドウが動くと思いました。
なぜなら、【参考資料】には、
以下のように書かれているからです。

Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

原因を確かめるため、いくつか試行錯誤を繰り返し行ってみましたが、
問題の解決には至りませんでした。

なお、私の環境は以下の通りです。
【MacBook Air (13-inch, Early 2015), 8 GB 1600 MHz DDR3, macOS Mojave 10.14.5, AWS, Laravel5.8.21】

検索エンジンでjQueryのchangeイベントハンドラを使ってモーダルウィンドウを発火させる方法を検索しましたが、
clickイベントでモーダルウィンドウを発火させる機能に関するページばかりで、解決に役立つ情報は見つかりませんでした。

##解決に至ったコード
●items.blade.php

        <table class="highlight centered">
            <thead>
                <tr>
                    <th>案件名</th>
                    <th>納期</th>
                    <th>単価</th>
                    <th>ステータス</th>
                    <th>メモ</th>
                    <th>編集・削除</th>
                </tr>
            </thead>
            <tbody>
                <!--変数化して、formsのindex番号を割り振るための$index-->
                <?php $index = 0; ?>
                    @foreach($list as $val)
                <tr>
                    <th>{{$val->item_name}}</th>
                    <th>{{$val->delivery_date}}</th>
                    <th>{{$val->unit_price}}円</th>
                    <th>
                        <form method="POST" action="/updateItemStates/{{$val->id}}" id="states_form">
                          {{csrf_field()}}
                          <div class="input-field col s12">
                            <select id="states" class="select" name="states" onchange="modalOpen{{$val->id}}()">
                              <option value="1" {{$val->states == '1' ? 'selected' : ""}}>未執筆</option>
                              <option value="2" {{$val->states == '2' ? 'selected' : ""}}>請求書挿入</option>
                            </select>
                            <label for="states">ステータス</label>
                          </div>
                        </form>
                    <script>
                        function modalOpen{{$val->id}}() {
                            //alert(document.forms[{{$loop->index - 1}}].states.selectedIndex);
                          if(document.forms[{{$index}}].states.selectedIndex==1){
                            //document.getElementById('states').selectedIndex
                            document.modal_form.item_id.value = '{{$val->id}}';
                            $('#modal01').modal('open');
                          }
                        }
                    </script>
                    <?php $index ++; ?>
                    </th>
                    <th>{{$val->memo}}</th>
                    <th><a href="/editItem/{{$val->id}}">管理画面</a></th>
                </tr>
                    @endforeach
            </tbody>
        </table>
    </div>
    </div>
    
    <!--請求書選択モーダル-->
    <div class="modal" id="modal01">
        <div class="overLay modalClose"></div>
            <div class="inner">
                  {{Form::open(['url' => 'addInvoice', 'id' => 'modal_select', 'name' => 'modal_form' ])}}
                  {{ csrf_field() }}
                <select name="invoice_id" class="select" onchange="submit(this.form)">
                  @foreach($invoiceList as $val)
                  <option value="{{$val->id}}">{{$val->invoice_title}}</option>
                  @endforeach
                </select>
                <label for="client_id">登録先の請求書</label>
                <button type="submit" class="btn btn-primary">請求書へ挿入</button> 
                {{Form::hidden('item_id', '')}}
                {{Form::hidden('states', '2')}}
                {{Form::hidden('client_id', $client->id)}}
                @foreach($list as $val)
                {{Form::hidden('item_name', $val->item_name)}}
                {{Form::hidden('bill_unit_price', $val->unit_price)}}
                @endforeach
                {{Form::close()}}
            <a href="" class="modalClose">Close</a>
            </div>
    </div>

Comments

[m.ts10806]

タグ「jQuery」で回答を得たいのでしたらLaravel Blade要素は排除されて、画面出力されたHTMLをそのまま提示されたほうが良いかと思います。

[m.ts10806]

あとモーダルはMaterializeのものをお使いでしたらタグを追加しておいてください。

Answer 1

jQueryが1.11.2と3.3.1の2つ導入されていますがこれはバグの元です。1つにしましょう。
何か特別な理由がない限りより新しいものだけで良いと思います。

あとはもっと最小構成のコードで試されたほうが良いですね。
ある程度出来上がったものに組み込むのって問題切り分けを困難にしますから。
部品で試してから組み込むやり方が望ましいです。

気になるのはselectタグに全て.selectクラスをつけていることでしょうか。
CSSフレームワークを使っていて「ここのセレクトだけ当てない」ということはないでしょうから、
クラス指定ではなくタグ指定でinitializeかけたほうが良いと思います。

ほぼ最小構成のコード

Materializeで組まれているのですからMaterializeの機能を使おうということで。
jQuery読まれているのでjQueryの記法に合わせています。
クローズは.modalCloseをあたえれば何とかしてくれるので実装不要です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body>
    <form method="POST" action="/updateItemStates/1" id="states_form">
      <div class="input-field col s12">
        <select id="states" class="select" name="states">
          <option value="1">未執筆</option>
          <option value="2">請求書挿入</option>
        </select>
        <label for="states">ステータス</label>
      </div>
    </form>
    <div class="modal" id="modal01">
      <div class="overLay modalClose"></div>
      <div class="inner">
        <form>
        <select class="select" onchange="submit(this.form)">
          <option value="1">タイトル１</option>
          <option value="2">タイトル２</option>
        </select>
        <label for="client_id">登録先の請求書</label>
        <button class="btn btn-primary">請求書へ挿入</button>
        </form>
        <a href="" class="modalClose">Close</a>
      </div>
    </div>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(function(){
    $('select').formSelect();
    $('.modal').modal();
    
    $('#states').on('change',function(){
        $('#modal01').modal('open');
    });
});
</script>
  </body>
</html>

Comments

[HirakuMorishima]

ご回答ありがとうございます。
また最小限のコードについても非常に参考となりました。

[m.ts10806]

ヒントになったようで何よりです