bestsource

드롭다운 메뉴를 기반으로 여러 개의 텍스트 표시

bestsource 2023. 9. 6. 22:12
반응형

드롭다운 메뉴를 기반으로 여러 개의 텍스트 표시

나는 많은 드롭다운 메뉴를 가지고 있는데, 네 개는 mariadb 데이터베이스에서 채우고 PHP와 두 개는 간단한 드롭다운에서 불러왔습니다.선택한 값에 따라 하나의 문자열을 구성하기 위해 각 인쇄별 텍스트로 전달하려고 하지만 함께 작업할 수 없습니다.

다음 두 가지 유형이 있습니다.

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

각 드롭다운에서 선택한 옵션을 하나의 문자열로 표시하려고 하는데 사용하려고 시도한 자바스크립트가 하나도 작동하지 않습니다.저는 이것을 작동시키기 위해 간단한 것을 찾고 있습니다.생각이나 아이디어 있는 사람?

아래 토막글은 개념 증명을 나타내며, 이를 실행하고 드롭다운 값을 변경하여 테스트할 수 있습니다.

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>

언급URL : https://stackoverflow.com/questions/75179534/multiple-show-text-based-on-drop-down-menus

반응형