title: Materialize how to change second select option depended from the first?
body: <p>I use materialize, and the problem is:
  I have 2 select-div with options, and when I choose Ukraine in the first select? The second select would show me only Lviv, Odessa, Kiev, kharkiv. If I choose Poland in the first select, the second select would show me only Warsaw and Krakow.</p>
  <p>I've already asked the same question, and received few answers which was useful, but when I linked materialize CSS, code doesn't work.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;input-field col s12&quot;&gt;
      &lt;select id=&quot;country-list&quot; onchange=&quot;changeCountry(this)&quot;&gt;
          &lt;option value=&quot;none&quot; disabled selected&gt;Choose your option&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;Ukraine &lt;/option&gt;
          &lt;option value=&quot;2&quot;&gt;Poland&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;input-field col s12&quot;&gt;
      &lt;select id=&quot;city-list&quot;&gt;
          &lt;option value=&quot;none&quot; disabled selected&gt;Choose your option&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;Lviv&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;Kiev&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;Kharkiv&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;Odessa&lt;/option&gt;
          &lt;option value=&quot;2&quot;&gt;Krakow&lt;/option&gt;
          &lt;option value=&quot;2&quot;&gt;Warsaw&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>And here JavaScript</p>
  <pre class="lang-js prettyprint-override"><code>var countryObject = {
      Ukraine: [&quot;Lviv&quot;, &quot;Kiev&quot;, &quot;Kharkiv&quot;, &quot;Odessa&quot;],
      Poland: [&quot;Krakow&quot;, &quot;Warsaw&quot;],
  };
  
  function changeCountry() {
      document.getElementById(&quot;city-list&quot;).options.length = 0;
  
      var cityListArray =
          countryObject[document.getElementById(&quot;country-list&quot;).value];
      console.log(document.getElementById(&quot;city-list&quot;).options);
  
      for (var item = 0; item &lt; cityListArray.length; item++) {
          document.getElementById(&quot;city-list&quot;).options[
              document.getElementById(&quot;city-list&quot;).options.length
          ] = new Option(cityListArray[item], cityListArray[item]);
      }
  }
  </code></pre>