title: JavaScript - Changing a <select> data from another <select>
body: <p>I'm trying to make a dynamic select.
  When i select a certain data in one select, the other change his view of data.
  Nothing that you all already didn't see, right?</p>
  
  <p>But i'm new with javascript codes, still learning..
  i tried something like <a href="https://jsfiddle.net/victorviegas/7yLjmfqz/" rel="nofollow">https://jsfiddle.net/victorviegas/7yLjmfqz/</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var selectchild = $('select[name="selectChild"] option');
  $('select[name="selectFather"]').on('change', function() {
    var selectfather = this.value;
    var newSelect = selectchild.filter(function() {
      return $(this).data('example') == selectfather;
    });
    $('select[name="selectChild"]').html(newSelect);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select name="selectFather"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    &lt;option value="a"&gt;A&lt;/option&gt;
    &lt;option value="b"&gt;B&lt;/option&gt;
    &lt;option value="c"&gt;C&lt;/option&gt;
  &lt;/select&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;select name="selectChild"&gt;
    &lt;option data-example="a" value="a"&gt;a&lt;/option&gt;
    &lt;option data-example="a" value="aa"&gt;aa&lt;/option&gt;
    &lt;option data-example="a" value="aaa"&gt;aaa&lt;/option&gt;
    &lt;option data-example="b" value="b"&gt;b&lt;/option&gt;
    &lt;option data-example="b" value="bb"&gt;bb&lt;/option&gt;
    &lt;option data-example="b" value="bbb"&gt;bbb&lt;/option&gt;
    &lt;option data-example="c" value="c"&gt;c&lt;/option&gt;
    &lt;option data-example="c" value="cc"&gt;cc&lt;/option&gt;
    &lt;option data-example="c" value="ccc"&gt;ccc&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The javascript get the "data-example" and show in the other select only the values of the same "data-example".
  What i don't know how to do is:</p>
  
  <p>1 - When you test my code, you can see that if you select a data in the first select, the second always shows the right content, but the last instead the firsts... How can i change the second select to start show values from top to bottom?</p>
  
  <p>2 - There's a way to use this script to make the second select show values like "onLoad" or something? the values are simply put that moment instantly and the current page dont process que it has changed.
     - For instance:
  if i put on the HTML selected="selected"</p>
  
  <pre><code>&lt;select name="selectFather"&gt;
    &lt;option value="a" selected="selected"&gt;A&lt;/option&gt;
    &lt;option value="b"&gt;B&lt;/option&gt;
    &lt;option value="c"&gt;C&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>the second select doesn't load the values i want.</p>
  
  <p>Thanks, guys! I'll keep trying!</p>