Get selected values from a combobox and show in a div

Question

Get selected values from a combobox and show in a div

Navigation

#1 by (2 votes)

0

I have a form where the user, when filling in, automatically appears in a div, as it happens here on the site. In text field I get it normally, but how would I get it from a combobox?

See below the text field code that I started to do, but I need it for the combobox:

HTML

<input name="Nome" id="nome" type="text" class="md-form-control responsavel required">

<!-- Aqui mostra o que foi digitado no campo acima -->
<p id="paragrafonome"></p>

The combobox I need to get is this:

<select name="Estado" id="estado">
  <option value="RJ">Rio de Janeiro</option>
  <option value="SP">São Paulo</option>
  <option value="MG">Minas Gerais</option>
</select>
<p id="paragrafoestado"></p>

JQuery

  // campo texto
  var nome = document.querySelector('#nome');
  var paragrafoNome = document.querySelector('#paragrafonome');
  nome.addEventListener('keyup', function () {
  paragrafoNome.innerHTML = "<div align='left' style='padding: 10px'><h3>" + nome.value + "</h3></div>";
  });

// Combobox
var estado = document.querySelector('#estado');
  var paragrafoEstado = document.querySelector('#paragrafoestado');
  estado.addEventListener('keyup', function () {
  paragrafoEstado.innerHTML = "<div align='left' style='padding: 10px'><h3>" + estado.value + "</h3></div>";
  });

javascript

asked by anonymous 11.09.2018 / 19:12

1 answer

css hover property is not covering the side item Help logging in to the login system, dropping the 2 form's

score 2 · Accepted Answer

You can hear the event change from <select> and get the value property.

Ex:

meu_combo.addEventListener('change', function () {
    console.log(this.value);  // retorna o value do option selecionado
});

But this code does not meet the purpose when select has the multiple attribute. To resolve this, simply access the HTMLSelectElement.selectedOptions property that contains a HTMLCollection with all options selected.

Example:

combo.addEventListener('change', function() {
    var i=0,
        l = select.selectedOptions.length,
        values = [];

    for (; i < l ; i++) {
       values.push(select.selectedOptions[i].value);
    }

    console.log(values.join(', '));
});

Snippet with the code working:

var combo = document.getElementById('combo');
var valores = document.getElementById('valores');

var combo_multiple = document.getElementById('combo_multiple');
var valores_multiple = document.getElementById('valores_multiple');

function getSelectedValues(select){
    var i=0,
        l = select.selectedOptions.length,
        values = [];
        
    for (; i < l ; i++) {
       values.push(select.selectedOptions[i].value);
    }
    
    return values.join(', ');
}

combo.addEventListener('change', function () {
    valores.innerHTML = getSelectedValues(this);
});

combo_multiple.addEventListener('change', function () {
    valores_multiple.innerHTML = getSelectedValues(this);
});

<select id="combo">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
   <option value="4">Option 4</option>
</select>

<select id="combo_multiple" multiple>
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
   <option value="4">Option 4</option>
</select>


<hr>

<strong>select:</strong>
<span id="valores"></span>
<br>
<strong>select[multiple]:</strong>
<span id="valores_multiple"></span>