Multiple Show Text based on Drop Down Menus

Question

I have a bunch of drop down menus, four populated from a mariadb database and called up with PHP and 2 from simple drop downs. I am trying to get these to each print specific text to form one string depending on the values selected but I cannot get them to work together.

I have two of these types:

<select name="s_floor_value" id="s_floor_value">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
            </select>

I have four of these that produce different values:

<select name="s_site_idnum" id="s_site_idnum">
        <?PHP 
      $sql_s_getsitetype = "SELECT * from locations order by s_name ASC";
$result_s_getsitetype = $conn->query($sql_s_getsitetype);

if ($result_s_getsitetype->num_rows > 0) {
  // output data of each row
  while($row_s_getsitetype = $result_s_getsitetype->fetch_assoc()) {
      
    echo "<option value=\"" . $row_s_getsitetype["site_id"]. "\">" . $row_s_getsitetype["site_name"]. "</option>";
      
  }
} else {
  echo "0 results";
}
      ?>
      </select>

I am trying to get the selected options from each drop down to appear as part of a single string but none of the Javascript I have tried to use has worked. I am looking for something simple to get this to work. Anyone have any thoughts or ideas?

Answer 1

The snippet below represents a proof-of-concept, you can test it by running it and changing the dropdown values

 let myItems = ['first', 'second', 'third', 'fourth']; function generateOutput() { let outputText = []; for (let item of myItems) { outputText.push(document.getElementById(item).value); } document.getElementById('output').innerText = outputText.join(' '); } window.addEventListener('load', generateOutput);

 <select id="first" onchange="generateOutput()"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> </select> <select id="second" onchange="generateOutput()"> <option value="aa">aa</option> <option value="bb">bb</option> <option value="cc">cc</option> <option value="dd">dd</option> </select> <select id="third" onchange="generateOutput()"> <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc">ccc</option> <option value="ddd">ddd</option> </select> <select id="fourth" onchange="generateOutput()"> <option value="aaaa">aaaa</option> <option value="bbbb">bbbb</option> <option value="cccc">cccc</option> <option value="dddd">dddd</option> </select> <p id="output"></p>