Dynamically populate a single field based on dropdown selections (Javascript / HTML)

Question

Im trying to get a part code generator by using multiple dropdown boxes which have multiple selection within each dropdown box. Id like to return the results into one field.

Code below generates each dropdown box into its on input field but i'd like it to amalgamate the information and build it as each dropdown box is selected.

<script type="text/javascript">
// Pre populated array of data
var myData = new Array();
myData[1] = 'JUN LED39 W';
  myData[2] = 'JUNO LED76 W';
myData[3] = 'P';
myData[4] = 'O';
myData[5] = '3K DALI';
myData[6] = '4K DALI';
myData[7] = '';
myData[8] = 'E3';
</script>

<form id="example" name="example">
<select id="lumen" name="lumen">
    <option value="" selected>lumen</option>
    <option value=1>3888lm</option>
    <option value=2>7666lm</option>
</select>
  <select id="diffuser" name="Diffuser">
    <option value="" selected>diffuser</option>
    <option value=3>Prismatic</option>
    <option value=4>Opal</option>
</select>
 </select>
  <select id="cct" name="cct">
    <option value="" selected>cct</option>
    <option value=5>3000k</option>
    <option value=6>4000k</option>
</select>
 <select id="em3" name="em3">
    <option value="" selected>emergency</option>
    <option value=7>No</option>
    <option value=8>Yes</option>
</select>
<br />
<input type="text" value="" id="answer1" name="answer1" />
  <input type="text" value="" id="answer2" name="answer2" />
    <input type="text" value="" id="answer3" name="answer3" />
      <input type="text" value="" id="answer4" name="answer4" />

</form>

<script type="text/javascript">
document.example.lumen.onchange = updateText;
document.example.diffuser.onchange = updateText;
document.example.cct.onchange = updateText;
document.example.em3.onchange = updateText;

function updateText() {
  var obj_sel = document.example.lumen;
  document.example.answer1.value = myData[obj_sel.value];
  var obj_sel = document.example.diffuser;
  document.example.answer2.value = myData[obj_sel.value];
  var obj_sel = document.example.cct;
  document.example.answer3.value = myData[obj_sel.value];
  var obj_sel = document.example.em3;
  document.example.answer4.value = myData[obj_sel.value];
  }
</script>

Answer 1

You can set the display value of the input fields to 'none' and change this as they are filled.

document.example.lumen.onchange = updateText;
document.example.diffuser.onchange = updateText;
document.example.cct.onchange = updateText;
document.example.em3.onchange = updateText;

function updateText() {
  var obj_sel = document.example.lumen;
  var lumen = myData[obj_sel.value] || '';
  
  var obj_sel = document.example.diffuser;
  var diffuser = myData[obj_sel.value] || '';
  
  var obj_sel = document.example.cct;
  var cct = myData[obj_sel.value] || '';
  
  var obj_sel = document.example.em3;
  var em3 = myData[obj_sel.value] || '';
  
  document.example.answer.value = `${lumen}    ${diffuser}    ${cct}    ${em3}`;
}

<script type="text/javascript">
  // Pre populated array of data
  var myData = new Array();
  myData[1] = 'JUN LED39 W';
  myData[2] = 'JUNO LED76 W';
  myData[3] = 'P';
  myData[4] = 'O';
  myData[5] = '3K DALI';
  myData[6] = '4K DALI';
  myData[7] = '';
  myData[8] = 'E3';
</script>

<form id="example" name="example">
  <select id="lumen" name="lumen">
    <option value="" selected>lumen</option>
    <option value=1>3888lm</option>
    <option value=2>7666lm</option>
  </select>
  <select id="diffuser" name="Diffuser">
    <option value="" selected>diffuser</option>
    <option value=3>Prismatic</option>
    <option value=4>Opal</option>
  </select>
  <select id="cct" name="cct">
    <option value="" selected>cct</option>
    <option value=5>3000k</option>
    <option value=6>4000k</option>
  </select>
  <select id="em3" name="em3">
    <option value="" selected>emergency</option>
    <option value=7>No</option>
    <option value=8>Yes</option>
  </select>
  <br />
  <input type="text" value="" id="answer" name="answer" style="width: 100%" />

</form>