Get selected textContent from combobox with javascript

Question

Get selected textContent from combobox with javascript

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I'm trying to get the textContent from the combo at the time it is clicked on the Save button, so it will mount a table with the values typed in the input text and the selected combo. Html example:

<div class="modal-content" id="cadastro-tarefa">
<label class="" for="orderBy">Nome</label>
  <input class="form-control" type="text" placeholder="">
  <div class="form-group">
  <label class="" for="orderBy">Tipo</label>
    <select class="form-control cb" id="cb" name="meucombo">
      <option value="" disabled selected>Selecione</option>
      <option value="1">Pergunta e Resposta</option>
      <option value="2">Multipla Escolha</option>
      <option value="3">Grade de Multipla Escolha</option>
    </select>
  </div>
</div>

javascript html

asked by anonymous 14.06.2017 / 20:01

2 answers

1

Would that be what you want to do?

jQuery(function($){
  $('#salvar').click(function(){
    var nome = $('#nome').val();
    var tipo = $('#cb').val();
    
    console.log(nome);
    console.log(tipo);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><divclass="modal-content" id="cadastro-tarefa">
<label class="" for="orderBy">Nome</label>
  <input class="form-control" id="nome" type="text" placeholder="">
  <div class="form-group">
  <label class="" for="orderBy">Tipo</label>
    <select class="form-control cb" id="cb" name="meucombo">
      <option value="" disabled selected>Selecione</option>
      <option value="Pergunta e Resposta">Pergunta e Resposta</option>
      <option value="Multipla Escolha">Multipla Escolha</option>
      <option value="Grade de Multipla Escolha">Grade de Multipla Escolha</option>
    </select>
  </div>
</div>

<input type="button" id="salvar" value="salvar">

14.06.2017 / 20:08

Call more than one bat script Date function returning month in en [duplicate]

score 2 · Accepted Answer

You can get the values by setting id to the controls and catching getElementById . See if it suits you

document.getElementById('btSalvar').onclick = function () {
  var nome = document.getElementById('txtNome').value;
  var tipo = document.getElementById('cb').value;
  if(nome && tipo){
      console.log(nome);
      console.log(tipo);
      var cb = document.getElementById("cb");
      var selectedText = cb.options[tipo].text;
      var html = '<td>' + nome + '</td><td>' + selectedText + '</td>';
      var tabela = document.getElementById('resultado');
      tabela.insertAdjacentHTML('beforeend', html);
  }
  
}

<div class="modal-content" id="cadastro-tarefa">
<label class="" for="orderBy">Nome</label>
  <input id="txtNome" class="form-control" type="text" placeholder="">
  <div class="form-group">
  <label class="" for="orderBy">Tipo</label>
    <select class="form-control cb" id="cb" name="meucombo">
      <option value="" disabled selected>Selecione</option>
      <option value="1">Pergunta e Resposta</option>
      <option value="2">Multipla Escolha</option>
      <option value="3">Grade de Multipla Escolha</option>
    </select>
  </div>
  <br>
  <button id="btSalvar">Salvar</button>
</div>

<table id="resultado">
<th width="60px">Nome</th>
<th width="160px">Tipo</th>
</table>