Selecione o veiculo:<select id="Carros" onChange="Carro()">
<option value="U">Up! 1.0
<option value="A">Argo 1.0
<option value="K">Ka SE Plus 1.0
<option value="S">Sandero Zen 1.0
<option value="H">HB20 Comfort Plus</select><p>
1 Resposta
Vou listar pra você algumas formas de fazer isso.
Usando a função onchange()
function carro() {
var carros = document.getElementById("carros");
var result = carros.options[carros.selectedIndex].value;
alert(result)
}
Selecione o veiculo: <select id="carros" onChange="carro()">
<option value="Up">Up! 1.0 </option>
<option value="Argo">Argo 1.0</option>
<option value="Ka" selected>Ka SE Plus 1.0 </option>
<option value="Sandero">Sandero Zen 1.0</option>
<option value="Hb20">HB20 Comfort Plus</option>
</select>
Usei sua sugestão da propriedade onchange().Esse evento ocorre sempre que o valor do elemento em questão for alterado.
É importante você ter em mente que programar requer seguir algumas boas práticas também. Por exemplo, você carros ao invés de Carros e carro() ao invés de Carro(). Você pode seguir o padrão que você quiser para nomear variáveis e funções, mas lembre-se que em outros contextos um padrão para nomenclatura pode ser exigido. Também é uma boa prática fechar as tags html.
Usando um addEventListener
window.addEventListener("DOMContentLoaded", function() {
const select = document.getElementById("carros");
alert(select.selectedIndex)
});
Selecione o veiculo:
<select id="carros">
<option value="U">Up! 1.0</option>
<option value="A">Argo 1.0</option>
<option value="K" selected>Ka SE Plus 1.0</option>
<option value="S">Sandero Zen 1.0</option>
<option value="H">HB20 Comfort Plus</option>
</select>
Neste exemplo, o script emite um alerta para exibir os elementos marcados como selected. Você pode adaptá-lo para ter a mesma função do primeiro exemplo. Ele faz isso registrando uma espera de evento a um elemento alvo, ou seja, ao select#carros.
Caso você queira usar um select multiple
var carros = document.getElementById("carros");
var selecionado = []
for(var i = 0; i < carros.length; i++) {
if(carros[i].getAttribute('selected') !== null) {
selecionado.push(carros[i].value)
}
}
alert(selecionado)
Selecione o veiculo: <select id="carros" multiple>
<option value="U" selected>Up! 1.0 </option>
<option value="A">Argo 1.0</option>
<option value="K" selected>Ka SE Plus 1.0 </option>
<option value="S">Sandero Zen 1.0</option>
<option value="H">HB20 Comfort Plus</option>
</select>
Neste exemplo, carros[i].getAttribute('selected') !== null
verifica o estado do atributo selected. Se você der um console.log(carros[i].getAttribute('selected'))
vai ver que o resultado ou é null
ou ""
(string vazia). Com um typeof você percebe que retorna null (object) e "" (string).
Você pode ver estes links para te ajudar:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange
https://developer.mozilla.org/pt-BR/docs/Web/API/Element/addEventListener