Selecionar mais de um item e exibir no console

Front-end
,
#1

quando seleciono mais de 1 item no option , exibe no console apenas o primeiro item selecionado… como faço para exibir todos os itens ?

<select  id="servico" name="select[]" size="4" multiple>
					<option value="" selected>Selecione os Serviços</option>
					<option value="1">Aparelho odontológico</option>
					<option value="2">Clareamento</option>
					<option value="3">Extração Dental</option>
					<option value="4">Implante</option>
					<option value="5">Lente de Contato</option>
					<option value="6">Limpeza</option>
					<option value="7">Obturação</option>
					<option value="8">Preenchimento Facial</option>
					<option value="9">Prótese</option>
					<option value="10">Tratamento De Canal</option>
					<option value="11">Outros</option>
				  </select>

Começar

function teste(){ var servico = document.getElementById("servico").value console.log(servico) }
#2

Exemplo:

2 curtidas
#3

Ou pode ser assim também:

const select = document.querySelector('#servico');

select.onchange = e => {
  // Converte HTMLCollection para um Array comum composto pelos valores das <options> selecionadas
  const selecteds = Array.from(e.target.selectedOptions, s => s.value);
  
  console.log(selecteds);
  
  // Para usar valores como inteiros ao invés de strings use o parseInt:
  // console.log(selecteds.map(s => parseInt(s)));
}

https://codepen.io/wldomiciano/pen/YzKeGgL

1 curtida