exibir e ocultar itens do select e que funcione quando o cadastro for feito

[Biel. 9]

<pre>
exibir e ocultar itens do select  que funcione quando o cadastro for feito<br>

Boa tarde a todos. Direto ao ponto. Pessoal entendo muito pouco de javascript e estou tentando obter o seguinte resultado e que funcione quando o cadastro for feito 

No EX 1 abaixo gostaria que

no select 1 ao selecionar seg_a_sexta gostaria que o select 3 me apresentasse este resultado
<select name="semanas"  required>
    <option value=""></option>
    <option value="segunda">segunda</option>
    <option value="terca">terca</option>
    <option value="quarta">quarta</option>
    <option value="quinta">quinta</option>
    <option value="sexta">sexta</option>  
</select>

no select 1 ao selecionar sabado gostaria que o select 3 me apresentasse este resultado
<select name="semanas"  required>
    <option value="sabado" >sabado</option>
</select>

no select 1 ao selecionar domingo gostaria que o select 3 me apresentasse este resultado
<select name="semanas"  required>
    <option value="domingo" >domingo</option>
</select>

</pre>

...

EX 1

<pre>
<hr>
select 1
<select name="semanas" style="width:100px;" required >
  <option value="" ></option>
  <option value="seg_a_sexta">seg_a_sexta</option>
  <option value="sabado">sabado</option>
  <option value="domingo">domingo</option>
</select> 

select 2 
<select name="id_semanas" style="width:100px;" >
   <option value=""></option> 
   <option value="1">seg_a_sexta</option>
   <option value="2">sabado</option>
   <option value="3">domingo</option>
</select>   
   
select 3
<select name="semanas" style="width:100px;"  required>
    <option value=""></option>
    <option value="segunda">segunda</option>
    <option value="terca">terca</option>
    <option value="quarta">quarta</option>
    <option value="quinta">quinta</option>
    <option value="sexta">sexta</option>
    <option value="sabado" >sabado</option>
    <option value="domingo" >domingo</option> 
</select>

<script>
(function(document){
  'use strict';
  var $semanas    = document.querySelector('select[name="semanas"]');
  var $id_semanas = document.querySelector('select[name="id_semanas"]');
 
  var mapA = {
    ''            : '',
    'seg_a_sexta' : '1',
    'sabado'      : '2',
    'domingo'     : '3'
  };
 
  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;
      }
    }
  }
 
  $semanas.addEventListener('change', function(){
    var v = this.value;
    selected($id_semanas, mapA[this.value]);
  });
 
}(document));
</script>


</pre>

 

 

 

 

 

 

 

 

[Maujor 144]

Você pergunta como fazer para ao se selecionar uma opção no Select1 seja apresentada no Select3 três variações de seleção.
Depois mostra um Select2 que não foi mencionado na pergunta e a seguir um script JavaScript envolvendo os três Selects e que não funciona.
1-) Inicialmente quantos selects há na página? 1, 2 ou 3?
2-) Por adivinhação imagino que o Select1 já está na página. É isso? e os outros 2?

Esclareça sua pergunta.
Você copiou e colou os códigos na tentativa de adaptá-los às sua necessidades?

 

[Biel. 9]

53 minutos atrás, Maujor disse:

Você pergunta como fazer para ao se selecionar uma opção no Select1 seja apresentada no Select3 três variações de seleção.
Depois mostra um Select2 que não foi mencionado na pergunta e a seguir um script JavaScript envolvendo os três Selects e que não funciona.
1-) Inicialmente quantos selects há na página? 1, 2 ou 3?
2-) Por adivinhação imagino que o Select1 já está na página. É isso? e os outros 2?

Esclareça sua pergunta.
Você copiou e colou os códigos na tentativa de adaptá-los às sua necessidades?

 

Oá Maujor, obrigado por postar. O script javascript está funcionando normalmente, juntamente com select 1 select 2 e select 3. copie somente todo EX 1 que postei acima e faça o teste. Obrigado!

Vamos deixar o select 2 de fora sem tirar o mesmo do código e focar no select 1 e select 3. Então gostaria de obter o seguinte resultado e que funcione quando o cadastro for feito.

<pre>
No select 1 ao selecionar o item seg_a_sexta gostaria que o select 3 me apresentasse este resultado
<select name="semanas"  required>
    <option value=""></option>
    <option value="segunda">segunda</option>
    <option value="terca">terca</option>
    <option value="quarta">quarta</option>
    <option value="quinta">quinta</option>
    <option value="sexta">sexta</option>  
</select>
ou ao selecionar o item sabado gostaria que o select 3 me apresentasse este resultado

<select name="semanas"  required>
    <option value="sabado" >sabado</option>
</select>

ou ao selecionar o item domingo gostaria que o select 3 me apresentasse este resultado
<select name="semanas"  required>
    <option value="domingo" >domingo</option>
</select>

</pre>

 

[Maujor 144]

Olá Biel,
Criei um exemplo funcional com o efeito que você está pretendendo obter.
Destina-se a demonstrar a lógica de funcionamento do script e você poderá melhorar e muito o código
usando ES6, mapeamento etc, tal como sugere seu post original.

Ver em https://jsfiddle.net/fg1jyonb/ 

[Biel. 9]

Maujor, funcionou muito bem. Muito obrigado! Entendo muito pouco de javascript, mas o código que você apresentou entendi 100% . Um detalhe: Se eu quisesse que sábado e domingo não precisasse ser selecionado, como ficaria o código; tipo assim: Selecionei sábado ou domingo no select 1 e no select 3 exibisse assim 

<select name="semanas"  required>
    <option value="sabado" >sabado</option>
</select>

e não assim

<select name="semanas"  required>
    <option value="" ></option>
    <option value="sabado" >sabado</option>
</select>

Nota: Somente para sábado e domingo e não seg_a_sexta . seg_a_sexta é importante que tenha <option value="" ></option> porque temos cinco opções , agora sábado e domingo não precisa porque só existe uma opção.