I cant get select drop down to work on my page

Question

The select dropdown won't show up on my materialize web page using a parallax container.

I've tried changing the heading and using different examples. I've also noticed that I may be using a different version that is preventing my page from showing up.

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

Here is the code for the dynamic dropdown I was trying to go for:

 <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

Here you go:

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

With regards to your second question about filling in options dynamically - here is a fully working demo. The things I think you need to watch for: 1. Look at where I loaded the CSS and javascript files for Materialize and Jquery. I used the CDN's, which is actually preferred. 2. You should only initialize the select into which you load the options dynamically after you have filled in the options. Therefore, you will see I initialized the select with id taste_notes after the for loop like so: $('#taste_notes').formSelect(); . If you do it before filling in the options dynamically, it will not work. Hope this helps.

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