resumir código

[Biel. 9]

Olá pessoal. O código abaixo está funcionando normalmente, mas gostaria que ficasse bastante resumido e continuasse funcionando. 

<style>
.verde, .amarelo, .azul,
#verde, #amarelo, #azul{ display: none;}
</style>

	<select id="aprendiz" class="aprendiz" size="3" onChange="funcTete();" > 
		<option value=""></option>
		<option value="item1" >item1</option>
		<option value="item2" >item2</option>
	</select>

	<select id="aluno" size="4"> 
		<option value=""></option>
		<option id="verde" class="verde ">verde</option>
		<option id="amarelo" class="amarelo ">amarelo</option>
		<option id="azul" class="azul ">azul</option>
	</select>

<script>

	function funcTete(){

		var itemSelecionado=document.getElementById('aprendiz').value;

		if(itemSelecionado==''){
			document.querySelector(".verde").style.display='none';
			document.querySelector('.amarelo').style.display='none';
			document.querySelector('.azul').style.display='none';
		}

		if(itemSelecionado=='item1'){
			document.querySelector(".verde").style.display='block';
			document.querySelector('.amarelo').style.display='block';
			document.querySelector('.azul').style.display='none';
		}

		if(itemSelecionado=='item2'){
			document.querySelector(".verde").style.display='block';
			document.querySelector('.amarelo').style.display='block';
			document.querySelector('.azul').style.display='block';
		}



	}
</script>

 

[wanderval 19]

Olha quando você diz resumir o código você deve entender que existe uma diferença entre código generico e código pequeno

 

O codigo generico nem sempre irá ficar pequeno mas será muito mais flexivel quando seguido de divisão de responsabilidade, agora o código pequeno ele foca na sua regra atual.

 

Codigo Generico: https://jsbin.com/yukaregole/edit?html,js,output

function funcTete() {
  var itemSelecionado=document.getElementById('aprendiz').value;

  if (itemSelecionado === '') {
    enableAndDisableItems(false);
  }

  if (itemSelecionado === 'item1') {
    enableAndDisableItems(null, ['verde', 'amarelo'])
  }

  if (itemSelecionado === 'item2') {
    enableAndDisableItems(true);
  }
}


function enableAndDisableItems(enable, options) {
  const items = document.querySelectorAll('#aluno')[0];
  
  if(!options) {
    Array.from(items).forEach(item => setDisplayValue(item, enable));
  }
 
  if (options) {
    Array.from(items).forEach(item => {
      let isValidItem = options.includes(item.value);
      setDisplayValue(item, isValidItem);
    });
  }
}

function setDisplayValue(item, isValidItem) {
   item.style.display = isValidItem ? 'block' : 'none';
}

Código pequeno: https://jsbin.com/wituqihofu/1/edit?html,js,output

function funcTete() {
  var itemSelecionado=document.getElementById('aprendiz').value;
  
  const setDisplayItems = (item1, item2, item3) => {
    document.querySelector(".verde").style.display=item1;
    document.querySelector('.amarelo').style.display=item2;
    document.querySelector('.azul').style.display=item3;
  }

  if (itemSelecionado === '') {
    setDisplayItems('none', 'none', 'none');
  }

  if (itemSelecionado === 'item1') {
    setDisplayItems('block', 'block', 'none');
  }

  if (itemSelecionado === 'item2') {
    setDisplayItems('block', 'block', 'block');
  }
}