Pick selected values from a combobox and show in a div

Question

I have a form where the user when filling, appears automatically in a div, as occurs here on the site. In text field I can pick up normally, but as I would to pick up from a combobox?

See below the code of the text field I started making, but need 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>";
  });

Answer 1

You can hear the event change of <select> and take the property value.

Ex.:

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

But this code does not meet the objective when the select has the attribute multiple. To resolve this just access the property HTMLSelectElement.selectedOptions containing 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 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>