acrescentar select ao codigo

[Biel. 9]

Boa noite a todos. Direto ao ponto. Pessoal estou tentando colocar o terceiro select aprendiz_c no codigo abaixo para obter o seguinte resultado:

Ao selecionar o item gol gostaria de obter este resultado  gol - Volkswagen - verde  ou 
Ao selecionar o item fiesta gostaria de obter este resultado  fiesta -  Ford - azul

...

<select name="aprendiz_a" required >
  <option value=""></option>
  <option value="gol">gol</option>
  <option value="fiesta">fiesta</option>
</select>
 
<select name="aprendiz_b" disabled>
  <option value=""></option>
  <option value="Volkswagen">Volkswagen</option>
  <option value="Ford" >Ford</option>
</select>

<select name="aprendiz_c" disabled>
  <option value=""></option>
  <option value="verde">verde</option>
  <option value="azul" >azul</option>
</select>

<script type="text/javascript">
(function(document){
  'use strict';
  var $aprendiz_a = document.querySelector('select[name="aprendiz_a"]'),
      $aprendiz_b = document.querySelector('select[name="aprendiz_b"]'),
      $aprendiz_c = document.querySelector('select[name="aprendiz_c"]');
	  
// ---------------------------------------------------------- 
  var mapA = {
    'gol':    'Volkswagen',
    'fiesta': 'Ford'
  };
  
// ----------------------------------------------------------

  function selected($select, value) {
    var $options = $select.getElementsByTagName('option');
 
    for(var i=0; i < $options.length; i++) {
      if ($options[i].value === value) {
        return $options[i].selected = true;
      }
    }
  }
// ----------------------------------------------------------
  $aprendiz_a.addEventListener('change', function(){
    var v = this.value;
    selected($aprendiz_b, mapA[this.value]);
  });

// ---------------------------------------------------------- 
 
}(document));
</script>

 

[William Bruno 1501]

Conheço esse código... :lol:

 

<select name="aprendiz_a" required >
  <option value=""></option>
  <option value="gol">gol</option>
  <option value="fiesta">fiesta</option>
</select>

<select name="aprendiz_b" disabled>
  <option value=""></option>
  <option value="Volkswagen">Volkswagen</option>
  <option value="Ford" >Ford</option>
</select>

<select name="aprendiz_c" disabled>
  <option value=""></option>
  <option value="verde">verde</option>
  <option value="azul" >azul</option>
</select>

<script type="text/javascript">
(function(document){
  'use strict';
  var $aprendiz_a = document.querySelector('select[name="aprendiz_a"]'),
      $aprendiz_b = document.querySelector('select[name="aprendiz_b"]'),
      $aprendiz_c = document.querySelector('select[name="aprendiz_c"]');

// ----------------------------------------------------------
  var mapA = {
    'gol':    'Volkswagen',
    'fiesta': 'Ford'
  };
  var mapB = {
    'gol':    'verde',
    'fiesta': 'azul'
  };

// ----------------------------------------------------------

  function selected($select, value) {
    var $options = $select.getElementsByTagName('option');

    for(var i=0; i < $options.length; i++) {
      if ($options[i].value === value) {
        return $options[i].selected = true;
      }
    }
  }
// ----------------------------------------------------------
  $aprendiz_a.addEventListener('change', function(){
    var v = this.value;
    selected($aprendiz_b, mapA[this.value]);
    selected($aprendiz_c, mapB[this.value]);
  });

// ----------------------------------------------------------

}(document));
</script>

[Biel. 9]

William, muito obrigado. Tarefa resolvida. :D :D :D