Returning select value with javascript / jquery

Navigation
0

I'm developing a software and I need to know which option the user selected and returned in the console.log, but I tried several functions and none worked. How do I get this return? 

    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/><spanclass="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>
    
asked by anonymous 18.12.2017 / 18:33

1 answer

1

Easy, just pick the selected option through ID > option > selected Using Jquery that you have already imported into your project: 

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

Follow the example: 

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/><spanclass="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>

Direct reference to the Jquery page (I recommend mt check there before asking, it speeds up your life): link

    
18.12.2017 / 18:43
Read multiple .txt files and remove duplicate information Doubt with select case