基于下拉菜单的多个显示文本

Question

我有一堆下拉菜单，其中四个来自 mariadb 数据库并使用 PHP 调用，另外 2 个来自简单的下拉菜单。 我试图根据所选值将这些打印到每个打印特定文本以形成一个字符串，但我无法让它们一起工作。

我有两种类型：

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

我有四个产生不同的值：

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

我试图从每个下拉列表中获取选定的选项，使其显示为单个字符串的一部分，但我尝试使用的 Javascript 均无效。 我正在寻找一些简单的东西来让它工作。 任何人有任何想法或想法？

Answer 1

下面的代码片段代表了一个概念验证，您可以通过运行它并更改下拉值来测试它

 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>