Javascript 我无法使用“选择”下拉菜单在我的页面上工作

使用视差容器时，选择下拉列表不会显示在我的物化网页上

我试着改变标题，用不同的例子。我还注意到，我可能正在使用另一个版本来阻止我的页面显示

    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="../css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
    <link href="../css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 

    <script>
        $(document).ready(function () {
            $('select').select();
        });
    </script>



   <div class="container">
        <div class="section">

            <!--   Icon Section   -->
            <div class="row">

                <div class="col lg12 m12 s12">

                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <label>Materialize Select</label>
                                <select>
                                    <option value="" disabled selected>Select Fruit</option>
                                    <option value="1">Mango</option>
                                    <option value="2">Orange</option>
                                    <option value="3">Apple</option>
                                </select>
                            </div>


                            <div class="row">
                                <div class="col lg3 m3 s12">
                                    <div class="icon-block">
                                        <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
                                        <h5 class="center">The Story of Wine</h5>

                                        <p class="light">Find out more about the drink we all know and love. Explore
                                            interesting
                                            findings that the
                                            data show us about wine.</p>
                                    </div>
                                </div>


                            </div>
                    </div>

                </div>
            </div>

$（文档）.ready（函数（）{
$（'select'）.select（）；
});
物化选择
挑选水果
芒果
橙色
苹果
闪现
葡萄酒的故事
了解更多我们都知道和喜爱的饮料。探索
有趣的
调查结果显示
数据向我们展示了葡萄酒

下面是我尝试使用的动态下拉列表的代码：

 <script>
                        function change_wine_type(type, taste) {

                            var type = document.getElementById(type);
                            var taste = document.getElementById(taste);
                            taste.innerHTML = "";

                            console.log(type.value)

                            if (wine_type.value == "Red") {
                                var optionArray = ["|", "fruity_red|light, fruity", "balanced_red|medium-bodied, balanced", "full_red|full-bodied, robust", "other_red|other"];
                            } else if
                                (wine_type.value == "White") {
                                var optionArray = ["|", "sweet_white|sweet, juicy, soft", "balanced_white|balanced/ complex", "dry_white|dry, briny, crisp, acidic", "other_white|other"];
                            } else if
                                (wine_type.value == "Rose") {
                                var optionArray = ["|", "savory_rose|savory, balanced, complex", "dry_rose|dry, citris, acidic", "sweet_rose|sweet, wet, fruity, moderate acid", "other_rose|balanced/ other rose"];
                            } else if
                                (wine_type.value == "Sparkling") {
                                var optionArray = ["|", "dry_white|dry, crisp, briny, acidic", "sweet_white|sweet, modest, fruity", "balanced_white|balanced, complex, moderate", "other_sparkling|other"];
                            }


                            for (var option in optionArray) {
                                var pair = optionArray[option].split("|");
                                var newOption = document.createElement("option");
                                console.log(optionArray)
                                newOption.value = pair[0];
                                newOption.innerHTML = pair[1];
                                taste_notes.options.add(newOption);
                            }
                        }
                    </script>

                    <div class="row">
                        <form class="col s12">


                            <div class="row">
                                <label>Wine Type</label>
                                <select id="wine_type" name="wine_type"
                                    onchange="change_wine_type(this.id,'taste_notes')">
                                    <option value="" disabled selected>select wine type</option>
                                    <option value="Red">Red</option>
                                    <option value="White">White</option>
                                    <option value="Rose">Rose</option>
                                    <option value="Sparkling">Sparkling</option>
                                </select>
                            </div>

                            <div class="row">
                                <label>Taste Notes</label>
                                <select id="taste_notes" name="taste_notes">

                                </select>
                            </div>
                    </div>

功能改变\葡萄酒\类型（类型、口味）{
var type=document.getElementById（类型）；
var taste=document.getElementById（taste）；
taste.innerHTML=“”；
console.log（type.value）
如果（葡萄酒类型值=“红色”）{
var optionArray=[“|”、“果味红|淡雅、果香”、“平衡的|红|中等酒体、平衡的”、“饱满的|红|浓郁、强健的”、“其他|红|其他”]；
}否则如果
（葡萄酒类型价值=“白色”）{
var optionArray=[“|”、“甜白|甜、多汁、软”、“平衡白|平衡/复合”、“干白|干、咸、脆、酸”、“其他白|其他”]；
}否则如果
（葡萄酒类型价值=“玫瑰”）{
var optionArray=[“|”、“savory|u rose | savory，balanced，complex”、“dry|u rose | dry，citris，acid”、“sweet|u rose | sweet，wet，Frience，Medium acid”、“other|u rose | balanced/other rose”]；
}否则如果
（葡萄酒类型价值=“起泡”）{
var optionArray=[“|”、“干白|干、脆、咸、酸”、“甜白|甜、适中、果味”、“平衡白|平衡、复杂、适中”、“其他起泡|其他”]；
}
for（optionArray中的var选项）{
var pair=optionArray[option]。拆分（“|”）；
var newOption=document.createElement（“选项”）；
控制台日志（可选阵列）
newOption.value=pair[0]；
newOption.innerHTML=pair[1]；
taste_notes.options.add（新选项）；
}
}
葡萄酒类型
选择葡萄酒类型
红色
白色
玫瑰
闪亮的
味觉笔记

给你：

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

    <!--   Icon Section   -->
        <div class="row">

            <div class="col lg12 m12 s12">
                <div class="row">
                    <form class="col s12">
                        <div class="row">
                            <div class="input-field col s12">                            
                                <select>
                                    <option value="" disabled selected>Select Fruit</option>
                                    <option value="1">Mango</option>
                                    <option value="2">Orange</option>
                                    <option value="3">Apple</option>
                                </select>
                                <label>Materialize Select</label>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col lg3 m3 s12">
                                <div class="icon-block">
                                    <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
                                    <h5 class="center">The Story of Wine</h5>
                                    <p class="light">Find out more about the drink we all know and love. Explore
                                        interesting
                                        findings that the
                                        data show us about wine.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script  src="https://code.jquery.com/jquery-3.4.1.js"  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="   crossorigin="anonymous"></script>
        <!--JavaScript at end of body for optimized loading-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

        <script>
            $(document).ready(function(){
                $('select').formSelect();
            });
        </script>
    </body>
  </html>

---

非常感谢你。它成功了，我现在有一个选择下拉列表。他们改变了调用的语法，还是因为我把它放在了表单标记中。我是JS的新手，所以任何解释都会非常有用@HowardMitchell由于必须使用Jquery初始化

选择

，因此必须包含Jquery，我通过包含

实现了这一点。我还包括类

输入字段

，并将

物化选择

移动到

选择

元素下方。否则我就把其他一切都保持原样。如果你需要进一步的解释，请让我知道。否则请将问题标记为完成。好的，这是有意义的。它会改变选择框的行为吗？我正在实现一个动态下拉列表，由于某些原因，我的循环没有正确地将选项附加到第二个“Taste Notes”选择字段。下面是一个例子。@HowardMitchell我已经编辑了我的答案，包括了你第二个问题的答案。我添加了一些注释。这在现在的世界上是很有意义的！！再次感谢你在这方面的帮助！！

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
          <!--Import materialize.css-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

        <title>Wine example</title>
    </head>
  <body>

    <div class="row">
        <form class="col s12">

            <div class="row">
                <label>Wine Type</label>
                <select id="wine_type" name="wine_type"
                    onchange="change_wine_type(this.id,'taste_notes')">
                    <option value="" disabled selected>select wine type</option>
                    <option value="Red">Red</option>
                    <option value="White">White</option>
                    <option value="Rose">Rose</option>
                    <option value="Sparkling">Sparkling</option>
                </select>
            </div>

            <div class="row">
                <label>Taste Notes</label>
                <select id="taste_notes" name="taste_notes"></select>
            </div>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.js"  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="   crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
        $(document).ready(function(){
            $('#wine_type').formSelect();
        });
    </script>

    <script>
        function change_wine_type(type, taste) {            

            var type = document.getElementById(type);
            var taste = document.getElementById(taste);
            taste.innerHTML = "";

            console.log(type.value)

            if (wine_type.value == "Red") {
                var optionArray = ["|", "fruity_red|light, fruity", "balanced_red|medium-bodied, balanced", "full_red|full-bodied, robust", "other_red|other"];
            } else if
                (wine_type.value == "White") {
                var optionArray = ["|", "sweet_white|sweet, juicy, soft", "balanced_white|balanced/ complex", "dry_white|dry, briny, crisp, acidic", "other_white|other"];
            } else if
                (wine_type.value == "Rose") {
                var optionArray = ["|", "savory_rose|savory, balanced, complex", "dry_rose|dry, citris, acidic", "sweet_rose|sweet, wet, fruity, moderate acid", "other_rose|balanced/ other rose"];
            } else if
                (wine_type.value == "Sparkling") {
                var optionArray = ["|", "dry_white|dry, crisp, briny, acidic", "sweet_white|sweet, modest, fruity", "balanced_white|balanced, complex, moderate", "other_sparkling|other"];
            }


            for (var option in optionArray) {
                var pair = optionArray[option].split("|");
                var newOption = document.createElement("option");
                console.log(optionArray)
                newOption.value = pair[0];
                newOption.innerHTML = pair[1];
                taste_notes.options.add(newOption);
            }
            $('#taste_notes').formSelect();
        }
    </script>

  </body>
</html>