title: Select not working - options not appearing on click
body: <p>I created a select tag using materialize CSS. creating options for this select tag dynamically. retrieve data from firebase then create the options.
  but options are not displayed when I click on the select tag. but when I go to inspect it will display those options are in the select tag.
  how to solve this</p>
  
  <p><a href="https://i.stack.imgur.com/7F7Sb.jpg" rel="nofollow noreferrer">this is how 'chrome inspect' and the result looks like</a></p>
  
  <p>this is HTML the part</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    /&gt;
  
    &lt;link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    /&gt;
  
  
    &lt;!-- Compiled and minified JavaScript --&gt;
  
    &lt;!-- &lt;link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    /&gt; --&gt;
  
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;h2&gt;Create schedule&lt;/h2&gt;
  
        &lt;div class="input-field col s12"&gt;
      &lt;select id="doctors"  onchange="myFunction()"&gt;
        &lt;option value="0" disabled selected&gt;Choose your option&lt;/option&gt;
      &lt;/select&gt;
      &lt;label&gt;Materialize Select&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  
  
  
      &lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;
  
      &lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;
      &lt;script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"&gt;&lt;/script&gt;
  
      &lt;!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --&gt;
      &lt;script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-analytics.js"&gt;&lt;/script&gt;
  
      &lt;!-- Add Firebase products that you want to use --&gt;
      &lt;script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"&gt;&lt;/script&gt;
      &lt;script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"&gt;&lt;/script&gt;
  
      &lt;script src="config.js"&gt;&lt;/script&gt;
  
      &lt;!-- &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt; --&gt;
      &lt;script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"
      &gt;&lt;/script&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        $(document).ready(function() {
  
          $('select').formSelect();
  
        });
      &lt;/script&gt;
  
      &lt;script src="doctor_scheduler_JS.js"&gt;&lt;/script&gt; //external js file
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>external js file (doctor_scheduler_JS.js)</p>
  
  <pre><code>const auth = firebase.auth();
  const db = firebase.firestore();
  
  var doctorsnames=[];
  var doctorsuids=[];
  
  const dropdown = document.getElementById("doctors");
  const option1 = document.createElement("option");
  
  
  db.collection("doctors")
      .get()
      .then(function(querySnapshot) {
  
          querySnapshot.forEach(function(doc) {
              // doc.data() is never undefined for query doc snapshots
              console.log(doc.id, " =&gt; ", doc.data());
             // var js = JSON.stringify(doc.data());
             // document.getElementById("container25").innerHTML = js;
              doctorsnames.push(doc.data().Name.fullname);
  
              doctorsuids.push(doc.id);
  
  
          });
          SetDropDown();
  
      })
      .catch(function(error) {
          console.log("Error getting documents: ", error);
      });
  
  
      function SetDropDown(){
  
  
        var loop = 0;
  
        doctorsnames.forEach(k=&gt;{
          //feildcotorsnames +=k + "&lt;br&gt;";
  
          var option1 = document.createElement("option");
          option1.value =doctorsuids[loop];
          option1.innerHTML =k;
          dropdown.appendChild(option1);
          loop++;
        });
  
        document.getElementById("container25").innerHTML = doctorsuids;
  
      }
  
  
  
      var show = ["india","pakisthan","usa","uk"];
      var values = ["3","4","5","6"];
  
      var j=0;
      show.forEach(i=&gt;{
  
          const option1 = document.createElement("option");
              option1.value =values[j];
              option1.innerHTML =i;
              dropdown.appendChild(option1);
              j++;
  
      });
  </code></pre>