habilitar e desabilitar tag option de acordo com select | JavaScript: programando na linguagem da web

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso JavaScript: programando na linguagem da web

por Joao Rafael Fantini

| 56.3k xp | 21 posts

Boa Tarde Vamos ao codigo

<div id="menu1" class="tab-pane fade">
    <p class="titulo-select">Selecione a opção:</p>
        <select size="1" id="opcoes" name="opcoes">
            <option value="1">opção1</option>
            <option value="2">opção2</option>            
        </select>
    <p class="titulo-select">Selecione o Ano:</p>
        <select size="1" id="ano" name="ano">
            <option value="2018">2018</option>
            <option value="2017">2017</option>
            <option value="2016">2016</option>
        </select>
    <button type="button" class="btn btn-primary" onclick="javascript:opcoes('form1');">Mostrar</button>
</div>

O que gostaria de fazer em javascript é que no select id="opcoes" quando selecionado "opção1" desabilitaria o option value="2018" e ao selecionar opção2 habilitaria o msmo

tentei com o seguinte script

    <script>
       if (document.getElementById('opcoes').value == "1"){ 
         document.getElementById('2018').setAttribute('disabled','');
     } else{
        document.getElementById('2018').setAttribute('enable','');
     }
    </script>

So que quando é selecionado a opcao2 ele nao habilita por a função ja foi executada Como seria a forma correta pra fazer, alguem tem alguma ideia??

Obrigado

2 respostas

solução!

por Artur Diniz Adam

| 100.4k xp | 155 posts

Alura Scuba Team Desenvolvedor e Instrutor

14/05/2018

Oi Joao,

Todo código que é colocado na tag <script> é executado assim que a tag script é carregada. Assim, o código que vc colocou não está sendo executado quando o valor do <select> é alterado, mas sim, quando a tag <script> é carregada.

Para isso é preciso guardar o seu código numa função e avisar o navegador que ela deve ser executada quando o elemento select for "mexido":

<script>
    const $select = document.getElementById('opcoes')

    function desabilitaOpcao(){
        if ($select.value == "1"){ 
             document.getElementById('2018').setAttribute('disabled','');
        } else{
            document.getElementById('2018').setAttribute('enable','');
        }
    }

    $select.addEventListener('input', desabilitaOpcao)
</script>

Uma outra coisa é que no seu código vc está adicionando um atributo enable no momento e que quer habilitar a opção 2018. Para habilitar o botão, é preciso remover o atributo disabled. O código ficaria assim:


<script>
    const $select = document.getElementById('opcoes')

    function desabilitaOpcao(){
        if ($select.value == "1"){ 
             document.getElementById('2018').setAttribute('disabled','');
        } else{
                document.getElementById('2018').removeAttribute('disabled','');
        }
    }

    $select.addEventListener('input', desabilitaOpcao)
</script>

por Joao Rafael Fantini

| 56.3k xp | 21 posts

15/05/2018

Obrigado pela solução, mas quando fui utilizar, a primeira vez que carrega a pagina ele ja traz o 2018 selecionado, somente após trocar as opções que ele vem bloqueado.

então pesquisando encontrei essa outra solução.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">
    $(document).ready(function() {
        $('#anoExecucao2').show();
        $('#anoExecucao').hide();
        $('#opcoes').change(function() {
             if ($('#opcoes').val() == 1) {
                $('#anoExecucao2').show();
                $('#anoExecucao').hide();   
            }  else {
                $('#anoExecucao2').hide();
                $('#anoExecucao').show();
            }
        });
    });
</script> 
<div id="menu1" class="tab-pane fade">
    <p class="titulo-select">Selecione a opção:</p>
        <select size="1" id="opcoes" name="opcoes">
            <option value="1">opção1</option>
            <option value="2">opção2</option>           
        </select>

    <p class="titulo-select">Selecione o Ano:</p>
        <select size="1" id="anoExecucao" name="anoExecucao">
            <option value="2018">2018</option>
            <option value="2017">2017</option>
            <option value="2016">2016</option>
        </select>

        <select size="1" id="anoExecucao2" name="anoExecucao2">
            <option value="2017">2017</option>
            <option value="2016">2016</option>
        </select>

    <button type="button" class="btn btn-primary" onclick="javascript:opcoes('form1');">Mostrar</button>
</div>
</body>
</html>

Criei um terceiro select com id = "anoExecucao2" e no script eu fiz conforme a opção ele mostrava um select e ocultava o outro.