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

Question

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 sentence, where each select is a word that composes the phrase? I’m sorry I wasn’t 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?

Answer 1

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

As commented by @Diego, recommended using the shortened operator +=, that 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 a space at the end, as in select are words, I found 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 edition 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" />