2

Dado o código:

var select = document.getElementById('meuSelect');
var input = document.querySelector('input');

select.addEventListener('change', function() {
   
	 var option = this.children[this.selectedIndex];
	 input.value = option.innerHTML;
});
<select id="meuSelect">
    <option value="a">Alfa</option>
    <option value="b">Beta</option>
    <option value="g">Gama</option>
</select>

<input type="text" />

(cedido por @Sergio referência)

O código realiza a função com um select, a pergunta é : Como obter o mesmo resultado, porém com múltiplos select, onde cada opção selecionada será enviada ao mesmo input, formando por exemplo uma frase, onde cada select é uma palavra que compõe a frase? Desculpem se não fui claro.

Por exemplo:

<select id="meuSelect1">
    <option value="a">Alfa</option>
    <option value="b">Beta</option>
    <option value="g">Gama</option>
</select>
<select id="meuSelect2">
    <option value="a">Delta</option>
    <option value="b">Épsilon</option>
    <option value="g">Digama</option>
</select>
<select id="meuSelect3">
    <option value="a">Zeta</option>
    <option value="b">Eta</option>
    <option value="g">Teta</option>
</select>
<input type="text" />

Como proceder no javascript?

3
  • 1
    input.value += option.innerHTML; ?
    – user28595
    13/05/2016 às 23:20
  • Somente com 3 selects?
    – David
    14/05/2016 às 0:52
  • @David No caso serão mais, porém mais do que 1 como exemplo já me serve para adaptar por aqui...
    – MagicHat
    14/05/2016 às 0:55

1 Resposta 1

1

Ao utilizar o input.value = option.innerHTML;, toda vez que clicar em uma nova palavra do select, seu input ira receber um novo valor, mas o que queremos é concatenar os valores para formar uma frase, certo?

Conforme comentado pelo @Diego, recomendou utilizar o operador encurtado +=, que seria a mesma coisa de fazer:

input.value =  input.value + option.innerHTML;

Tabela com mais exemplos

operador significado

x += y      x = x + y
x -= y      x = x - y
x *= y      x = x * y
x /= y      x = x / y
x %= y      x = x % y
x <<= y     x = x << y
x >>= y     x = x >> y
x >>>= y    x = x >>> y
x &= y      x = x & y
x ^= y      x = x ^ y
x |= y      x = x | y

Ou seja, para resolver seu problema, adicionei o operador e ainda mais um espaço no final, pois como no select são palavras, achei interessante.

var select = document.getElementById('meuSelect');
var input = document.querySelector('input');

select.addEventListener('change', function() {
   
	 var option = this.children[this.selectedIndex];
	 input.value += option.innerHTML + ' ';
});
div {
  display: inline-block;
}
<div>
  <label for="meuSelect">Palavras</label>
  <br>
  <select id="meuSelect">
      <option selected></option>
      <option value="a">Alfa</option>
      <option value="b">Beta</option>
      <option value="g">Gama</option>
  </select>
</div>
</div>
<div>
  <label for="frase">Frase</label>
  <br>
  <input type="text" id="frase" />
</div>


Com a edição e 3 select:

var select1 = document.getElementById('meuSelect1');
var select2 = document.getElementById('meuSelect2');
var select3 = document.getElementById('meuSelect3');

var input = document.querySelector('input');

select1.addEventListener('change', function() {
   
	 var option = this.children[this.selectedIndex];
	 input.value += option.innerHTML + ' ';
});

select2.addEventListener('change', function() {
   
	 var option = this.children[this.selectedIndex];
	 input.value += option.innerHTML + ' ';
});

select3.addEventListener('change', function() {
   
	 var option = this.children[this.selectedIndex];
	 input.value += option.innerHTML + ' ';
});
<select id="meuSelect1">
    <option selected></option>
    <option value="a">Alfa</option>
    <option value="b">Beta</option>
    <option value="g">Gama</option>
</select>
<select id="meuSelect2">
    <option selected></option>
    <option value="a">Delta</option>
    <option value="b">Épsilon</option>
    <option value="g">Digama</option>
</select>
<select id="meuSelect3">
    <option selected></option>
    <option value="a">Zeta</option>
    <option value="b">Eta</option>
    <option value="g">Teta</option>
</select>
<input type="text" />

5
  • e Diego F Editei a pergunta, tornando explícito o objetivo, pois diferente da oportuna resposta, possui 3 select, como procedo no javascript? Desde já agradeço a atenção.
    – MagicHat
    14/05/2016 às 0:53
  • De maneira bem simples, adicionei mais 2 eventos, porém esses 2 eventos retornando para o mesmo input, talvez tenha alguma forma dinâmica de fazer isso para todos os select de um form por exemplo, mas ai seria mais complexo :)
    – David
    14/05/2016 às 1:05
  • 1
    Já respondeu a pergunta, minimizar o código fica por minha conta...Vlw bro nota 10...
    – MagicHat
    14/05/2016 às 1:21
  • estou com uma dificuldade neste código, pode me ajudar? Como eu devo proceder para que exista um título dentro do select ? Por exemplo: "Marcas" seria o título e "a,b,c" as opções. O que ocorre é que seu eu retirar o "selected" para mostrar a 1º opção como um título, quando eu clico ele realiza a função, porém ele trás a 1º e a opção selecionada... Exemplo no input ele trás "Marca c", pode dar um help?
    – MagicHat
    18/08/2016 às 14:15
  • Cara desconsidere, eu havia mudado o evento "change " para "click", com change funciona ok! vlw
    – MagicHat
    18/08/2016 às 14:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .