Я не могу получить выпадающий список для работы на моей странице

Question

Выпадающий список не будет отображаться на моей материализованной веб-странице с использованием контейнера параллакса.

Я пытался изменить заголовок и использовать разные примеры. Я также заметил, что, возможно, я использую другую версию, которая препятствует отображению моей страницы.

    <!-- 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>

Вот код динамического раскрывающегося списка, для которого я пытался перейти:

 <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>

Answer 1

Вот, пожалуйста:

<!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>

Что касается вашего второго вопроса о динамическом заполнении опций - вот полностью рабочая демонстрация. Вещи, на которые, я думаю, нужно обратить внимание: 1. Посмотрите, куда я загрузил файлы CSS и javascript для Materialise и Jquery. Я использовал CDN, что на самом деле предпочтительнее. 2. Вы должны инициализировать select, в который вы загружаете параметры динамически после того, как вы заполнили параметры. Поэтому вы увидите, что я инициализировал select с идентификатором taste_notes после цикла for следующим образом: $('#taste_notes').formSelect();. Если вы сделаете это до динамического заполнения параметров, это не сработает. Надеюсь, это поможет.

<!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>