Returning select value with javascript/jquery

Asked

Viewed 1,008 times

0

I am developing a software and I need to know which option the user selected and return in the console.log, but I have tried several functions and none worked. How do I get that 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 />
    <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>

javascript jquery select option

  • The value is select? Tried document.getElementById('colchao').value?

  • I was trying a if (document.getElementById('colchao-1').selected == true) { console.log("colchão selecionado - menos de 6 meses"); } @bfavaretto

2 answers

1


Easy, just grab the option selected via ID > option > Selected Using the 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 />
  <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>

Direct reference of the page of Jquery(recommend mt consult there before asking, speeds up your life) : https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

  • thanks!!! I will always check this page!

  • @Joaopedro resolved to please mark as correct answer !

0

With pure Javascript

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

If you want to return the value of option selected

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

In case you want to return the value of each option

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

Browser other questions tagged javascript jquery select option

You are not signed in. Login or sign up in order to post.