Find below the answer to your question.
var opcao = document.getElementById('teste'); //busca o select
function extrair(separador){ //funcao extrair que retorna um array com os valores
if(opcao.selectedIndex!=0) return opcao.value.split(separador); //separa os valores pelo [separador]
}
opcao.onchange=function(){ //evento de mudanca de estado
var valores = extrair('|'); //inicializa a funca extrair para obter os resultados
console.log(valores); //lista o array
console.log("Valor 1: "+valores[0]); //lista valor 1
console.log("Valor 2: "+valores[1]); //list valor 2
}
<!DOCTYPE html>
<html>
<head>
<title>Como fazer múltiplos valores em um único option e recupera-los</title>
</head>
<body>
<select id="teste">
<option>Selecione uma opcao</option>
<option value="valor1|valor2" >Opcao 1</option>
</select>
</body>
</html>
If you do not want to use the onchange
property of the element you can always add a opcao.addEventListener(EVENTO, FUNCAO)
eventListener.
opcao.addEventListener('change', function(){
var valores = extrair('|'); //inicializa a funca extrair para obter os resultados
console.log(valores); //lista o array
console.log("Valor 1 no event listener: "+valores[0]); //lista valor 1
console.log("Valor 2 no event listener: "+valores[1]); //list valor 2
})