Materializeでselectメニューが隠れてしまう。

皆様いつもお世話になっております。

動作環境は以下の通りです。
jQuwey:jquery-3.3.1.min
Materialize: 1.0.0-beta

selectメニューを書いたのですが、Materializeを適応したらselectメニューが見えなくなってしまいました。
ソースを見る限りselectメニューは存在するのですが。。。どうしたらselectメニューを表示できるようになるでしょうか？

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <!--Import materialize.css-->
9    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
10    <title>Document</title>
11</head>
12<body>
13<div class="container">
14    <form action="index.php" method="post">
15        <div class="row input-field">
16            <div class="col s7">
17                <input type="text" name="prod_name" placeholder="商品名">
18            </div>
19            <div class="col s5">
20                <input type="text" name="mount" placeholder="個数">
21            </div>
22            <div class="col s6 offset-s6"></div>
23           <div class="row">
24               <div class="col s6">
25                   <select name="category"> <!-- これが消える -->
26                       <option value="鮮魚">鮮魚</option>
27                       <option value="冷凍食品">冷凍食品</option>
28                       <option value="常温">常温</option>
29                   </select>
30               </div>
31               <div class="col6 s6 offset-6"></div>
32           </div>
33            <div class="row">
34            <div class="col s4">
35                <input type="text" name="year" placeholder="年">
36            </div>
37            <div class="col s4">
38                <input type="text" name="mon" placeholder="月">
39            </div>
40            <div class="col s4">
41                <input type="text" name="day" placeholder="日">
42            </div>
43                <input type="submit" name="regist" value="登録" class="btn waves-effect waves-light" >
44            </div>
45
46    </form>
47</div>
48<!--JavaScript at end of body for optimized loading-->
49<script type="text/javascript" src="js/materialize.min.js"></script>
50<script>
51    $(function() {
52        $('.btn').on('click', function() {
53            $('.btn').hide();
54            // 3秒後に元に戻す
55            setTimeout(function() {
56                $('.btn').show();
57            }, 3000);
58        });
59    });
60</script>
61<script>
62    $(document).ready(function(){
63        $('select').formSelect();
64    });
65</script>
66<script src="js/jquery-3.3.1.min.js"></script>
67</body>
68</html>

css
1base.css
2
3.button{
4    position: relative;
5    left: 8px;
6}

理想像はこんなかんじです。

アドバイスとご教授のほどよろしくお願いします。

補足情報：
Formだけに絞ったコードでも、セレクトメニューは表示されません。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <!--Import materialize.css-->
9    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
10    <link type="text/css" rel="stylesheet" href="css/base.css"  media="screen,projection"/>
11    <title>Document</title>
12</head>
13<body>
14<div class="container">
15    <form action="index.php" method="post">
16        <div class="row input-field">
17          <div class="row">
18                <div class="col s6">
19                    <select name="category">
20                        <option value="鮮魚">鮮魚</option>
21                        <option value="冷凍食品">冷凍食品</option>
22                        <option value="常温">常温</option>
23                    </select>
24                </div>
25          </div>
26        </div>
27    </form>
28</div>
29<!--JavaScript at end of body for optimized loading-->
30<script type="text/javascript" src="js/materialize.min.js"></script>
31<script>
32    $(function() {
33        $('.btn').on('click', function() {
34            $('.btn').hide();
35            // 3秒後に元に戻す
36            setTimeout(function() {
37                $('.btn').show();
38            }, 3000);
39        });
40    });
41</script>
42<script src="js/jquery-3.3.1.min.js"></script>
43<script>
44    $(document).ready(function(){
45        $('select').formSelect();
46    });
47</script>
48
49</body>
50</html>

もっと絞ってみました。Materializeを読み込まないようにすればセレクトメニューは表示されました。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport"
6          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <!--Import materialize.css-->
9    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
10    <link type="text/css" rel="stylesheet" href="css/base.css"  media="screen,projection"/>
11    <title>Document</title>
12</head>
13<body>
14<select name="category">
15    <option value="鮮魚">鮮魚</option>
16    <option value="冷凍食品">冷凍食品</option>
17    <option value="常温">常温</option>
18</select>
19</body>
20</html>

退会済みユーザー

2018/04/22 14:38

bootstrap ぽいべつのなにかなら bootstrap タグは不要

kalon

2018/04/22 14:40

ご指摘ありがとうございます。修正いたしました。

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

回答1件

ベストアンサー

ざくっとみたかんじ

IE11 (ActiveX 許可）
Edge
火狐
クローム

で普通に表示されてますがどのブラウザのことでしょうか?

<select> タグ自体はすべてのブラウザで display: none に設定されてますね。

（Input type=text のような別の何かになる）

Active X 無効化したIEや古いIEではこのスタイルは適用できません。

投稿2018/04/22 14:55

退会済みユーザー

総合スコア0

kalon

2018/04/22 15:05

@asahina1979様、いつも回答をありがとうございます。 ChromeとSafaliで確認しました。どちらもセレクトメニュー（プルダウンメニュー）が表示されません。

退会済みユーザー

2018/04/22 15:08

コピペミスじゃなく素でこの通りなのか JQuery の読込順序が正常じゃないのとか。。。。

kalon

2018/04/22 15:14

退会済みユーザー

2018/04/22 15:23

てことはうちがしっている　materialize とはちがうのかな本家は 1.0.0-beta ですし

kalon

2018/04/22 15:28

セレクトメニューだけにしぼって書いてみましたが、セレクトメニューは表示されませんでした。 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="css/base.css" media="screen,projection"/> <title>Document</title> </head> <body> <div class="container"> <form action="index.php" method="post"> <div class="row input-field"> <div class="row"> <div class="col s6"> <select name="category"> <option value="鮮魚">鮮魚</option> <option value="冷凍食品">冷凍食品</option> <option value="常温">常温</option> </select> </div> </div> </div> </form> </div>  <script type="text/javascript" src="js/materialize.min.js"></script> <script> $(function() { $('.btn').on('click', function() { $('.btn').hide(); // 3秒後に元に戻す setTimeout(function() { $('.btn').show(); }, 3000); }); }); </script> <script src="js/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $('select').formSelect(); }); </script> </body> </html>

kalon

2018/04/22 15:31

失礼しました。質問に書いていた動作環境の中のMaterializeは正しくは1.0.0-betaでした。

m.ts10806

2018/04/22 22:57

読み込み順の件は <script src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> かと。ブラウザ開発ツールのコンソールにエラー出てると思いますよ。

kalon

2018/04/23 01:26

お返事ありがとうございます。ご教授いただいたとおりにしたところ、セレクトメニューが表示されるようになりました。セレクトメニューを表示させるためのjQuery文もファイルの読み込み文の下に記述したところ直りました。 <script src="js/jquery-3.3.1.min.js"></script>  <script type="text/javascript" src="js/materialize.min.js"></script> <script> $(document).ready(function(){ $('select').formSelect(); }); </script>

m.ts10806

2018/04/23 01:28

jquery本体の読み込みを先に行わずjqueryの機能を使おうとするのはエンジンを乗せないまま車を走らせようとするようなものなので、必ず一番最初に読み込ませるようにする必要があります。

kalon

2018/04/23 01:28

mts10806様ベストアンサーに選びたいので、お手数ですが回答の方に同じ内容で投稿いただけないでしょうか？

kalon

2018/04/23 01:28

asahina1979様もお付き合いありがとうございました。

m.ts10806

2018/04/23 01:31 編集

JQuery の読込順序については既に回答主であるasahina1979さんが先にコメントされていて、私は回答にするまでもないかとその補足をしただけなので、当回答の流れで解決に至れた、ということで当回答をBAで良いかと思います。