materializecssでselectボックスが表示されない

selectがdisplay:none;にデフォルトで設定されていて、解除が出来ません！

RailsでWebアプリを作っています。
国を選択するタブを作りたく、下記より簡単にリストを作成しようとしています。

HTMLにコードを書き、javascriptを読み込んでデフォルトの非表示を解除しようとしたのですが、
解除が出来ません・・・

下記回答も確認しましたが上手くいかず、どなたかご教授頂けますでしょうか？

https://qiita.com/tukiyo3/items/45c88fe4ec7da6216f08
https://teratail.com/questions/123073
https://stackoverflow.com/questions/28258106/materialize-css-select-doesnt-seem-to-render

selectが表示されません。

該当のソースコード

html
1<!-- ここでmaterializeを読み込んでいます！ -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="UTF-8" />
6    <title>LifeStampRally</title>
7    <style type="text/css" href="./style.css">
8    </style>
9    <!-- Compiled and minified CSS -->
10    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
11
12    <!-- Compiled and minified JavaScript -->
13    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
14    
15    <!--CSS-->
16    <link rel="stylesheet" href="index.css">  
17    
18    <!--アイコン用-->
19    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
20    
21    <!--jQuery-->
22    <script
23  src="https://code.jquery.com/jquery-3.3.1.js"
24  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
25  crossorigin="anonymous"></script>
26
27    <%= csrf_meta_tags %>
28    <%= csp_meta_tag %>
29
30    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
31    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
32  </head>
33
34  <body>
35    <nav class="white navigation">
36      <div class="nav-wrapper">
37        <a href="/" class="brand-logo green-text">Life Stamp Rally</a>
38        <ul class="right hide-on-med-and-down">
39          <li><a href="/stamps/new" class="waves-effect waves-light btn card-panel teal lighten-1"><i class="material-icons left">cloud_upload</i>Stamp!</a></li>
40        </ul>
41      </div>
42    </nav>
43
44    <%= yield %>
45  </body>
46</html>

html
1<!DOCTYPE html>
2<!--ここがキャプチャの投稿画面です-->
3<html>
4  <head>
5    <script src="new.js"></script>
6　　<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
7  </head>
8  <body>
9        <!--カード-->
10    <div class="col s12 m7">
11      <%= form_for @photo, :url => {:action => 'create'} do |f| %>
12      <h5 class="header">Let's STAMP the memory about your journey</h5>
13        <div class="card horizontal">
14          <div class="card-image">
15            <!--アップした写真を表示したい-->
16            <img src="http://butsuri.fun/wp-content/uploads/2018/04/757226.jpg">
17          </div>
18          <div class="card-stacked">
19            <div class="card-content">
20              <!--タイトル、そもそもいる？-->
21                <div class="row title">
22                  <form class="col s12">
23                    <div class="row">
24                      <div class="input-field col s6">
25                        <!--データ型変更しないと！-->
26                        <input id="icon_prefix" type="text" name="title" class="validate">
27                        <label for="icon_prefix">タイトル</label>
28                      </div>
29                    </div>
30                  </form>
31                </div>
32              
33              <!--国選択-->
34                <div class="input-field col s12 country-select">
35                  <select>
36                    <optgroup label="team 1">
37                      <option value="1">Option 1</option>
38                      <option value="2">Option 2</option>
39                    </optgroup>
40                    <optgroup label="team 2">
41                      <option value="3">Option 3</option>
42                      <option value="4">Option 4</option>
43                    </optgroup>
44                  </select>
45                <label>国</label>
46              　</div>
47              
48              <label class="field waves-effect waves-light btn card-panel teal lighten-1">
49                  <a><i class="large material-icons left">camera_alt</i></a>
50                <div id="filename">
51              　　<%= f.file_field :photo, multiple: true, :value => "photo" %>
52              　</div>
53              </label>
54              <textarea name="text" placeholder="メモ" rows="10" cols="30"></textarea>
55            </div>
56            <div class="card-action">
57              <input type="submit" value="Stamp!!">
58            </div>
59          </div>
60        </div>
61      <% end %>
62    </div>
63    
64  </body>
65</html>

css
1.col{
2    margin:0 auto;
3}
4
5.header{
6    text-align:center
7}
8
9.card{
10    margin:0 auto;
11    width:610px;
12    height:400px;
13}
14
15.card-image{
16    width:30%;
17}
18
19.card-content input{
20    width: 320px;
21}
22
23.card-content title{
24    display:block;
25    padding-bottom:20px;
26}
27
28.country-select{
29    display:block;
30    padding-bottom:50px;
31}
32
33.btn a{
34    color:white;
35    font-size: 1000px;
36}
37
38.btn i{
39    display:block;
40    margin:0 auto;
41}
42
43#filename{
44    display: none; 
45}

js
1  document.addEventListener('DOMContentLoaded', function() {
2    var elems = document.querySelectorAll('select');
3    var instances = M.FormSelect.init(elems, options);
4  });
5

試したこと

jQueryを用いてみたり、scriptをhtml内に書いてみたり・・・

はじめて

初めての質問投稿です。分かりにくい点ありましたらすみません・・・

m.ts10806

2019/03/11 07:52

materialize本体のcss,javascriptの読み込み記述はどこでしょうか？

m.ts10806

2019/03/11 07:52

ブラウザ開発ツールのコンソールにエラーが出ていませんか？

m.ts10806

2019/03/11 07:54

提示されているHTMLとスクリーンショットの情報が合致しませんので、「どこまでできているか」が不明瞭となります。なるべく省略されないほうが良いかと思います。

k.chisato

2019/03/11 09:38

アドバイスありがとうございます。省略していないコードに編集しました。 materializeはapplication.htmlで読み込んでいます。またエラーは特に出ていません・・・

x_x

2019/03/14 05:22

options には実際には何を指定しているのでしょうか？

k.chisato

2019/03/17 06:15

こちら解決しました。ありがとうございます！

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

回答2件

JavaScriptが読み込まれていないように見えます。
headタグ内に下記を追記してみるとどうでしょうか？

html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

投稿2019/03/11 07:35

hibikikudo

総合スコア238

k.chisato

2019/03/11 09:39

ありがとうございます。説明不足恐縮ですが、 application.htmlの方で読み込んでいます。こちら各ページに記載した方が良いのでしょうか？

hibikikudo

2019/03/12 03:27

単一のページではなく複数のページなのでしょうか？ > こちら各ページに記載した方が良いのでしょうか？ CDNからのCSSおよびJSファイルの読み込みは各ページでそれぞれ必要です。

k.chisato

2019/03/12 07:46

今回の事象は単一のページ（投稿ページ）に関してです。全体としてはざっくり投稿一覧ページと投稿ページが現状あります。念のため投稿ページのheadにjavascript読み込みコードを記載してみましたが、変化なしです・・・ちなみにjavascriptが読み込まれているか調べる術などあれば教えて頂きたいです。

hibikikudo

2019/03/14 02:45 編集

https://materializecss.com/getting-started.html の HTML Setup の通りにcdnソースを読み込んでいるか今一度ご確認ください。 > ちなみにjavascriptが読み込まれているか調べる術こちら参考になるでしょうか　https://teratail.com/questions/93527

k.chisato

2019/03/17 06:10

確認したところ読み込みは正常でした。ありがとうございます。なお、自力で解決できました。アドバイス下さりありがとうございました！！

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