0

Estou desenvolvendo um software e preciso saber qual a opção o usuário selecionou e retornar no console.log, porém já tentei várias funções e nenhuma funcionou. Como eu faço para conseguir esse retorno?

    function verificar() {

        //  aqui seria a função que reconhece o select escolhido e retorna um console.log
    }

    function habilitarColchao() {

        var radios = document.getElementsByName("colchao[]");
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                var checked_value = radios[i].value;
                if (checked_value == 'colchao[]' || checked_value == 'tempo') {
                    document.getElementById('proximo').disabled = true;
                    document.getElementsByName('tempo-colchao')[i].disabled = true;
                } else {
                    document.getElementById('proximo').disabled = false;
                    document.getElementsByName('tempo-colchao')[i].disabled = false;
                    document.getElementById('proximo').style.cursor = "pointer";
                }
                break;
            }

        }
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Quiz - Dr. Lava Tudo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

</head>

<body>
    <img src="http://drlavatudo.com/wp-content/uploads/2017/12/colchao.png" />
    <br />
    <span class="name-item">colchão</span>
    <br />
    <form class="form-inline">
        <label class="custom-control custom-checkbox ">
            <input type="checkbox" class="custom-control-input" name="colchao[]" value="2" onclick="habilitarColchao()">
            <span class="custom-control-indicator"></span>
        </label>
        <select class="custom-select" id="colchao" name="tempo-colchao" disabled="disabled">
            <option selected hidden>Selecione</option>
            <option value="colchao-1">Menos de 6 meses</option>
            <option value="colchao-2">De 6 meses a 2 anos</option>
            <option value="colchao-3">Mais de 2 anos</option>
        </select>
    </form>
    <button type="submit" onclick="verificar()" class="btn btn-block calcular" id="proximo" disabled="disabled">calcular</button>
</body>

</html>

2
  • O valor so select? Tentou document.getElementById('colchao').value?
    – bfavaretto
    18/12/2017 às 17:35
  • eu estava tentando um if (document.getElementById('colchao-1').selected == true) { console.log("colchão selecionado - menos de 6 meses"); } @bfavaretto
    – Joao Pedro
    18/12/2017 às 17:37

2 Respostas 2

1

Fácil, só pegar a opção selecionada através ID > option > selected Utilizando o Jquery que você já tem importado no seu projeto:

$("#colchao option:selected").each(function() {
    console.log($(this).val()); // valor 
    console.log($(this).text()); // texto
});

Segue o exemplo:

function verificar() {

  $("#colchao option:selected").each(function() {
    console.log($(this).val()); // valor 
    console.log($(this).text()); // texto
  });
}

function habilitarColchao() {

  var radios = document.getElementsByName("colchao[]");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      var checked_value = radios[i].value;
      if (checked_value == 'colchao[]' || checked_value == 'tempo') {
        document.getElementById('proximo').disabled = true;
        document.getElementsByName('tempo-colchao')[i].disabled = true;
      } else {
        document.getElementById('proximo').disabled = false;
        document.getElementsByName('tempo-colchao')[i].disabled = false;
        document.getElementById('proximo').style.cursor = "pointer";
      }
      break;
    }

  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Quiz - Dr. Lava Tudo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

</head>

<body>
  <img src="http://drlavatudo.com/wp-content/uploads/2017/12/colchao.png" />
  <br />
  <span class="name-item">colchão</span>
  <br />
  <form class="form-inline">
    <label class="custom-control custom-checkbox ">
            <input type="checkbox" class="custom-control-input" name="colchao[]" value="2" onclick="habilitarColchao()">
            <span class="custom-control-indicator"></span>
        </label>
    <select class="custom-select" id="colchao" name="tempo-colchao" disabled="disabled">
            <option selected hidden>Selecione</option>
            <option value="colchao-1">Menos de 6 meses</option>
            <option value="colchao-2">De 6 meses a 2 anos</option>
            <option value="colchao-3">Mais de 2 anos</option>
        </select>
  </form>
  <button type="submit" onclick="verificar()" class="btn btn-block calcular" id="proximo" disabled="disabled">calcular</button>
</body>

</html>

Referencia direto da página do Jquery(recomendo mt consultar lá antes de perguntar, agiliza sua vida) : https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

2
  • obrigado!!! vou conferir sempre essa página!
    – Joao Pedro
    18/12/2017 às 17:54
  • @JoaoPedro se resolveu por favor, marcar como resposta correta ! 18/12/2017 às 18:21
0

Com JavaScript puro

var index = document.getElementById("mySelect").selectedIndex;
var value = document.getElementsByTagName("option")[index].value;

Caso queira retornar o value do option selecionado

var index = document.getElementById("mySelect").selectedIndex;
console.log(document.getElementsByTagName("option")[index].value);

Caso você queira retornar o value de cada option

var allOption = document.querySelector("#mySelect").children;
for (var i = 0; i < allOption.length; i++) {
        console.log(allOption[i].getAttribute("value"));
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .