Capturar valor de um select com java script

[pedrohcosta 0]

Boa tarde Pessoal, 

 

Sou novo no forum e comecei agora a mexer com javascript e estou me matando para tentar criar uma solução para o meu formulário feito em php. 

Vou explicar o que o meu formulário faz para vocês entenderem o que eu preciso fazer. 

Esse formulario eu tenho um campo onde eu preencho o CPF e abaixo tenho uma tag select que eu seleciono o serviço, e tenho um input na frente, onde eu devo colocar o valor do serviço. 

O select e o input são dinamicos, criei um javascript para adicionar e remover inputs e selects. 

Até ai tudo bem... mas eu preciso bloquear o input de acordo com o valor do select, eu até consegui fazer, mas apenas na primeira div, quando eu adiciono outro campo com input e select o codigo não funciona para essa div, apenas para a primeira. 

Segue meu html: 

<div class="col-sm-3 col-md-3">
            <label for="teste" class="control-label">Serviço:</label>
            <select name="tpservico[]" onchange="alterar()" class="sele form-control" autofocus="">
                <option value="1">Abertura de Conta Poupança</option>
                <option value="4">Cheque Especial</option>
                <option value="2">Consignado</option>
                <option value="8">tesssstennntdao</option>
            </select>
       </div>
        <div class="col-sm-3 col-md-3">
                   <label for="teste" class="control-label">Valor do Serviço:</label>
                <input class="form-control" type="text" name="vlserv[]" maxlength="10" onkeyup="moeda(this);" '="" value=""><br>
        </div>
        <div class="col-sm-2 col-md-2" align="center"><br>
                <button type="button" class="removerCampo btn btn-danger" name="Remover">
                        <i class="glyphicon glyphicon-minus"></i> Remover
                </button>                
         </div>

 

Segue o meu codigo java script: 

function alterar(){    
 
 var sele = document.querySelector('.sele','.form-control');
  
        if(sele.value ==1){
            alert('campo bloqueado');
        }
         
        if(sele.value ==4){
            alert('campo bloqueado');
        }
         
        if(sele.value ==8){
            alert('campo bloqueado');
        }
        

    
}
 

Se alguém puder me ajudar ficaria muito grato. 
Lembrando que esse alert eu coloquei apenas para teste, para ver se o código estava funcionado, ainda vou incrementar o bloqueio do input. 

[Omar~ 87]

Veja:

Spoiler

<script>
    function mostarOpcao() {
        var selecionado = document.getElementById('meu_select').value;
        document.getElementById('receber_valor').innerHTML = selecionado;
    }
</script>
<select id="meu_select" onchange="mostarOpcao();">
    <option value="">Selecione</option>
    <option value="selecionou o numero 1">Opção 1</option>
    <option value="selecionou o numero 2">Opção 2</option>
    <option value="selecionou o numero 3">Opção 3</option>
</select>
<br />
<div id="receber_valor"></div>

 

 

[pedrohcosta 0]

@Omar~ muito obrigado pela resposta, mas gostaria de entender uma coisa, no meu caso eu tenho um botão que cria vários selects dinâmicos e em cada select tem uma div, se eu colocar um id no select irá funcionar só no primeiro select ou não?

E outra dúvida nessa linha de código:

document.getElementById('receber_valor').innerHTML = selecionado;

No final tem uma div em branco que é a receber_valor, Não entendi muito bem a funcionalidade dela, teria como me explicar por favor, me desculpe pela quantidade de perguntas, mas é que comecei agora a mexer com javascript.

[Omar~ 87]

Primeiramente esse elemento 'receber_valor' era só para mostra qual foi o resultado obtido do value que é a variável selecionado.

Sim no caso que mostrei anteriormente só irá funcionar o primeiro pois uma página jamais pode possuir mais de um elemento com o mesmo ID.

 

Pois bem, existem diversas formas de detectar qual é o select que foi acionado.

Uma pode ser passando o ID do select como parâmetro para função, acho mais viável pois a velocidade de processamento é mais rápido assim.

Spoiler

<script>
    function mostarOpcao(id_do_elemento) {
        var selecionado = document.getElementById(id_do_elemento).value;
        alert('Selecionado o ' + id_do_elemento + ' e o valor foi:' + selecionado);
    }
</script>

<select id="meu_select-a" onchange="mostarOpcao(this.id);">
    <option value="">Selecione</option>
    <option value="numero 1 a">Opção 1</option>
    <option value="numero 2 a">Opção 2</option>
    <option value="numero 3 a">Opção 3</option>
</select>
<select id="meu_select-b" onchange="mostarOpcao(this.id);">
    <option value="">Selecione</option>
    <option value="numero 1 b">Opção 1</option>
    <option value="numero 2 b">Opção 2</option>
    <option value="numero 3 b">Opção 3</option>
</select>

 

 

Uma outra forma das diversas possíveis é não usar um identificador e sim um className e executar um loop para chegar ao select ativado, ou pouco mais grotesco mas fica bacana assim também.

Spoiler

<select class="meu_select">
    <option value="">Selecione</option>
    <option value="numero 1 a">Opção 1</option>
    <option value="numero 2 a">Opção 2</option>
    <option value="numero 3 a">Opção 3</option>
</select>
<select class="meu_select">
    <option value="">Selecione</option>
    <option value="numero 1 b">Opção 1</option>
    <option value="numero 2 b">Opção 2</option>
    <option value="numero 3 b">Opção 3</option>
</select>

<script>
    // A função só pode ser executada depois do documento estiver 100% carregado,
    //caso contrário ela não vai encontrar todos select com a class referente
    function mostarOpcao() {
        var elemento_classe = document.getElementsByClassName('meu_select');
        var i;
        for (i = 0; i < elemento_classe.length; i++) {
            elemento_classe[i].onchange = function () {
                alert(this.value);
            };
        }
    }

    // Iniciamos a função
    mostarOpcao();
</script>

 

 

Além disso pode-se capturar adicionando "addEventListener" ao seletores, ambém pode obter o valor por "event.target", tem mais formas só que agora não estou lembrando de cabeça.

 

#EDIT

Havia me esquecido. Se você tem uma função que cria novos selects e optar pela segunda forma que mostrei usando className ao invés de ID você deve recarregar a função toda vez que um novo select é criado.

 

Lembre-se que isso só são exemplos que você pode usar como base para desenvolver da forma que achar melhor.

[pedrohcosta 0]

Entendi... muito obrigado pela explicação, eu utilizei o document.queryselectorAll, e com o laço for funcionou certinho. 
Muito obrigado pela atenção! valeu!!!

[pedrohcosta 0]

Usei dessa forma: 
function alterar(){    
 
 var input = document.querySelectorAll('.valor','.form-control');
 var sele = document.querySelectorAll('.sele','.form-control');
 
     for(var i = 0; i < sele.length;i++){ 
        if(sele.value ==1){
            input.disabled = true;            
        }
         
        if(sele.value ==4){
            input.disabled = true;            
        }
         
        if(sele.value ==8){
            input.disabled = true;            
        }
        
        if(sele.value == 2){
            input.disabled = false;
        }
        if(sele.value == 3){
            input.disabled = false;
        }

    }
}