Send multiple "select" text to the same "input text"?

Question

Send multiple "select" text to the same "input text"?

Navigation

#1 by (1 votes)

2

Given the code:

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" />

(provided by @Sergio reference )

The code performs the function with a select, the question is: How to get the same result, but with multiple select, where each selected option will be sent to the same input, forming for example a phrase, where each select is a word that make up the phrase Sorry if I was not clear.

For example:

<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" />

How to proceed in javascript?

javascript

asked by anonymous 14.05.2016 / 01:18

1 answer

format a multi caption with "R $" using Chart Chart JS Error uploading site

score 1 · Accepted Answer

When using input.value = option.innerHTML; , every time you click a new word from select , your input will receive a new value, but we want to concatenate the values to form a sentence, right?

As commented by @Diego, recommended using the shortened operator += , which would be the same thing to do:

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

Table with more examples

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

That is, to solve your problem, I added the operator and even more space at the end, because as select are words, I found it interesting.

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>

With edit and 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" />