Resumir código javascript

[Biel. 9]

Boa tarde a todos. Direto ao ponto. Pessoal estou tentando resumir o código abaixo e que funcione. 

Veja que estou repetindo 5 vezes 

  for(x in){
      var itemW                = [x].split("|");
      var newOption           = document.createElement("option");
          newOption.value     = itemW[0];
          newOption.innerHTML = itemW[1];
          appendChild(newOption);

Gostaria que o código ficasse mais resumido. Veja:

<script>
	for(x in dadosA){
		var itemW                = dadosA[x].split("|");
		var newOption           = document.createElement("option");
		    newOption.value     = itemW[0];
		    newOption.innerHTML = itemW[1];
            SegundoSelect.appendChild(newOption); 
			}
	//=================================================================	
	for(x in dadosB){
		var itemW                = dadosB[x].split("|"); 
		var newOption           = document.createElement("option");
		    newOption.value     = itemW[0];
		    newOption.innerHTML = itemW[1];
			TerceiroSelect.appendChild(newOption);
			}		
	//=================================================================		
	for(x in dadosC){
		var itemW                = dadosC[x].split("|"); 
		var newOption           = document.createElement("option");
		    newOption.value     = itemW[0];
		    newOption.innerHTML = itemW[1];
			QuartoSelect.appendChild(newOption);
			}
	//=================================================================				
	  for(x in dadosD){
	  var itemW                = dadosD[x].split("|");
	  var newOption           = document.createElement("option");
		  newOption.value     = itemW[0];
		  newOption.innerHTML = itemW[1];
		  QuintoSelect.appendChild(newOption);
		  }	
	//=================================================================
	  for(x in dadosE){
	  var itemW                = dadosE[x].split("|");
	  var newOption           = document.createElement("option");
		  newOption.value     = itemW[0];
		  newOption.innerHTML = itemW[1];
		  SextoSelect.appendChild(newOption);
		  }

</script>

 

 

 

[washalbano 54]

Olá!

Crie um objeto com os selects e os dados de maneira que fique assim:
 

selectsData = {
   'first-select': dadosA,
   'second-select': dadosB,
   'third-select': dadosC,
   'fourth-select': dadosD,
   'fifth-select': dadosE
};

E percorre esse objeto assim:
 

Object.entries(selectsData).forEach(([select, dados]) => {
   dados.forEach((dado)=>{
      var itemW = dado.split("|");
      var newOption = document.createElement("option");
      newOption.value = itemW[0];
      newOption.innerHTML = itemW[1];
      document.querySelector('#' + select).appendChild(newOption);
   });
});

 

[Biel. 9]

washalbano, obrigado por resumir o código; mesmo assim não conseguir fazer funcionar. Sou iniciante em javascript. Veja todo o código na integra:

<script type="text/javascript">
function populate(PrimeiroSelect , SegundoSelect, TerceiroSelect, QuartoSelect, QuintoSelect, SextoSelect){
	var PrimeiroSelect = document.getElementById(PrimeiroSelect);
	var SegundoSelect  = document.getElementById(SegundoSelect);
	var TerceiroSelect = document.getElementById(TerceiroSelect);
	var QuartoSelect   = document.getElementById(QuartoSelect);
	var QuintoSelect   = document.getElementById(QuintoSelect);
	var SextoSelect   = document.getElementById(SextoSelect);
//=================================================================
	SegundoSelect.innerHTML = "";
	TerceiroSelect.innerHTML = "";
	QuartoSelect.innerHTML = "";
	QuintoSelect.innerHTML = "";
	SextoSelect.innerHTML = "";
//=================================================================
  
	if(PrimeiroSelect.value == "azul"){
		var dadosA = ["1|1"];
		var dadosB = ["|" , "0.00|R$ 0,00"];
		var dadosC = ["|sapato", "1|1"];
		var dadosD = ["|roupa", "roupaP|roupaM"];
		var dadosE = ["|camisa", "2017|2017"];
		}	
//----------------------------------------------------------

	if(PrimeiroSelect.value == "verde"){
		var dadosA = ["2|2"];
		var dadosB = ["0.00|R$ 0,00"];
		var dadosC = ["cc|cc"];
		var dadosD = ["dd|dd"];
		var dadosE = ["ee|ee"];
		}  
		
//##########################################################
// QUERO RESUMIR O CÓDIGO DAQUI PRA BAIXO E QUE FUNCIONE
	for(x in dadosA){
		var itemW                = dadosA[x].split("|");
		var newOption           = document.createElement("option");
		    newOption.value     = itemW[0];
		    newOption.innerHTML = itemW[1];
            SegundoSelect.appendChild(newOption);
			}
//=================================================================	
	for(x in dadosB){
		var itemW                = dadosB[x].split("|");
		var newOption           = document.createElement("option");
		    newOption.value     = itemW[0];
		    newOption.innerHTML = itemW[1];
			TerceiroSelect.appendChild(newOption);
			}		
//=================================================================	
	for(x in dadosC){
		var itemW                = dadosC[x].split("|");
		var newOption           = document.createElement("option");
		    newOption.value     = itemW[0];
		    newOption.innerHTML = itemW[1];
			QuartoSelect.appendChild(newOption);
			}
//=================================================================			
	  for(x in dadosD){
	  var itemW                = dadosD[x].split("|");
	  var newOption           = document.createElement("option");
		  newOption.value     = itemW[0];
		  newOption.innerHTML = itemW[1];
		  QuintoSelect.appendChild(newOption);
		  }		
//=================================================================		  
	  for(x in dadosE){
	  var itemW                = dadosE[x].split("|");
	  var newOption           = document.createElement("option");
		  newOption.value     = itemW[0];
		  newOption.innerHTML = itemW[1];
		  SextoSelect.appendChild(newOption);
		  }
}

</script>

 

[washalbano 54]

Olá!
Creio que ainda não entendi.

 

<!doctype html>
<html>
   <head>
      <meta charset='utf-8'>
      <title>Javascrip Selects</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel='stylesheet' href='css/style.css'>
   </head>
   <body>
      <main>
         <header id='main'>

         </header>
         <div id='stage'>
            <select name="" id="first-select">
               <option value="azul">Selecione uma opção</option>
               <option value="azul">0</option>
               <option value="verde">1</option>
            </select>
            <select name="" id="second-select"></select>
            <select name="" id="third-select"></select>
            <select name="" id="fourth-select"></select>
            <select name="" id="fifth-select"></select>
            <select name="" id="sixth-select"></select>
         </div>
         <footer id='main-footer'>

         </footer>
      </main>
      <script src="js.js" type="text/javascript"></script>
   </body>
</html>

function populate(PrimeiroSelect, SegundoSelect, TerceiroSelect, QuartoSelect, QuintoSelect, SextoSelect) {
   var PrimeiroSelect = document.getElementById(PrimeiroSelect);
//=================================================================

   dadosA = ["2|2"];
   dadosB = ["0.00|R$ 0,00"];
   dadosC = ["cc|cc"];
   dadosD = ["dd|dd"];
   dadosE = ["ee|ee"];

   if (PrimeiroSelect.value == "azul") {
      dadosA = ["1|1"];
      dadosB = ["|", "0.00|R$ 0,00"];
      dadosC = ["|sapato", "1|1"];
      dadosD = ["|roupa", "roupaP|roupaM"];
      dadosE = ["|camisa", "2017|2017"];
   }

   selectsData = {
      SegundoSelect: dadosA,
      TerceiroSelect: dadosB,
      QuartoSelect: dadosC,
      QuintoSelect: dadosD,
      SextoSelect: dadosE
   };

   Object.entries(selectsData).forEach(([select, dados]) => {
      select = eval(select);
      // remove os options atuais:
      document.getElementById(select).innerHTML = "";
      dados.forEach((dado) => {
         var item = dado.split("|");
         var newOption = document.createElement("option");
         newOption.value = item[0];
         newOption.innerHTML = item[1];
         document.getElementById(select).appendChild(newOption);
      });
   });

}
document.getElementById('first-select').addEventListener('change', function () {
   populate('first-select', 'second-select', 'third-select', 'fourth-select', 'fifth-select', 'sixth-select')
});

 

[Marcos_imasters 288]

for(x in dadosA){var itemW=dadosA[x].split("|");(newOption=document.createElement("option")).value=itemW[0],newOption.innerHTML=itemW[1],SegundoSelect.appendChild(newOption)}for(x in dadosB){var itemW=dadosB[x].split("|");(newOption=document.createElement("option")).value=itemW[0],newOption.innerHTML=itemW[1],TerceiroSelect.appendChild(newOption)}for(x in dadosC){var itemW=dadosC[x].split("|");(newOption=document.createElement("option")).value=itemW[0],newOption.innerHTML=itemW[1],QuartoSelect.appendChild(newOption)}for(x in dadosD){var itemW=dadosD[x].split("|");(newOption=document.createElement("option")).value=itemW[0],newOption.innerHTML=itemW[1],QuintoSelect.appendChild(newOption)}for(x in dadosE){var itemW=dadosE[x].split("|"),newOption=document.createElement("option");newOption.value=itemW[0],newOption.innerHTML=itemW[1],SextoSelect.appendChild(newOption)}

 

[Biel. 9]

washalbano o código ficou bem resumido, diminuindo assim o número de linhas. Obrigado.