How to make multiple values in a single option and retrieve them

-1

I want to know how can I make a list with a specific tab "|" and set more than one value in select-option and retrieve in JavaScript with a split("|") to a variable, something like:

<select id="teste">

  <option value="valor1|valor2" >Opcao 1 </option>

</select>

Recovering JavaScript

var A = valor1

var B = valor2

extrair = function(){

var txt = document.getElementById("teste");

var valores = txt.options[txt.selectedIndex].value;

alert(valores)

}
    
asked by anonymous 27.01.2017 / 09:00

2 answers

1

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
})
    
27.01.2017 / 09:55
1

Below is the code to capture the multiple values in a single option that will be used in our "test" is well commented on, not giving details.

extrair = function() {

var texto = document.getElementById("teste"); // aponta para select alvo

var valores = texto.options[texto.selectedIndex].value; // armazena os valores na variável

var array = valores.split("|"); // cria-se o array

   alert("var A = "+array[0]); // exibir valor 1

   alert("var B = "+array[1]); // exibir valor 2

}
<select id="teste" onchange="extrair(this.options[this.selectedIndex].value)">
  
 <option>Selecione uma opcao</option>
 <option value="valor1|valor2" > Opcao 1 </option>

</select>
    
27.01.2017 / 14:59