javascript - 选择 html 更改其他 从 onchange 函数中选择 html

Question

我有一个 select html，其中包含 select sql 语句。我们称之为 Select A。如果 select A 更改为某个值，则 select B 和 select C 将根据 select A 的 select sql 语句中的数据进行更改。 我尝试但失败的方法是围绕在 Select A 上使用 onchange 展开的。然后它将调用一个函数。然而，这个函数需要从 php 变量中读取来获取值。但我们知道 PHP 不能在 javascript 中运行。

我能想到的另一种方法是在 Select A 的 onchange 上再次使用窗口刷新功能。刷新的页面将从 url 链接中 $_GET 获取值(例如: terminalassign.php?id=1&terminalposition =这里&...) 但它再次使用onchange，因此无法在javascript中获取PHP值。

有人有任何想法吗？

这是我的代码:

onchange上的函数

<script language="Javascript" type="text/javascript">
  function terminalupdate() {
    var terminalposition = <?php echo (json_encode($terminalposition)) ;?>
    var terminalstatus = <?php echo (json_encode($terminalstatus)); ?>
    document.getElementById("terminalposition").value=terminalposition;
    document.getElementById("terminalstatus").value=terminalstatus;
  }
</script>

正文

        <td><p id="spacing" align="left">Terminal ID</p></td>
            <?php
            $sql2 = "SELECT * FROM terminal WHERE merchantid IS NULL ORDER BY terminalaccountno ASC";
            $RS2 = mysql_query($sql2, $db);
            $rows = array();
            while ($row = mysql_fetch_array($RS2))
                $rows[] = $row;
            ?>
            <td id="spacing" style="padding-left:100px">
                <select name="terminalid" onchange="terminalupdate()" required>
             <?php
            foreach ($rows as $row) {
             echo "<option value='$row[terminalid]'>$row[terminalaccountno]</option>";
             $terminalstatus = $row['terminalstatus'];
             $terminalposition = $row['terminalposition'];
            }
             ?>
                </select>
                <?php if (!empty($merchantaddresserror)): ?><br>
                    <span class="spanstyle"><?php echo $merchantaddress;?></span>
                <?php endif; ?><br>
            </td>
        </tr>
        <tr>
            <td><p id="spacing" align="left">Status</p></td>
            <td id="spacing" style="padding-left:100px">
                <select name="terminalstatus" id="terminalstatus" required>
                    <option value="" <?php if($terminalstatus=="") echo 'selected="selected"'?>> </option>
                    <option value="active" <?php if($terminalstatus=="active") echo 'selected="selected"'?>>Active</option>
                    <option value="inactive" <?php if($terminalstatus=="inactive") echo 'selected="selected"'?>>Inactive </option>
                    <option value="lost" <?php if($terminalstatus=="lost") echo 'selected="selected"'?>>Lost</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><p id="spacing" align="left">Terminal Position</p></td>
            <td id="spacing" style="padding-left:100px">
                <select name="terminalposition" required>
                    <option value="" <?php if($terminalposition=="") echo 'selected="selected"'?>> </option>
                    <option value="Deployed" <?php if($terminalposition=="Deployed") echo 'selected="selected"'?>>Deployed</option>
                    <option value="Used By Developer" <?php if($terminalposition=="Used By Developer") echo 'selected="selected"'?>>Used By Developer</option>
                    <option value="Sent For Repair" <?php if($terminalposition=="Sent For Repair") echo 'selected="selected"'?>>Sent For Repair</option>
                    <option value="Write-Off" <?php if($terminalposition=="Write-Off") echo 'selected="selected"'?>>Write-Off</option>
                    <option value="Stolen" <?php if($terminalposition=="Stolen") echo 'selected="selected"'?>>Stolen</option>
                </select>

Answer 1

这就是在 Ajax 的帮助下事情变得更容易的方式

首先在第一个下拉菜单发生变化时调用 JavaScript 函数，其中包含 ajax 调用。

function loadData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // populate both dropdown using result of getData.php file
      // You can acccess the values using this.responseText.dropdown2 and this.responseText.dropdown3
      console.log(this.responseText);
    }
  };
  xhttp.open("GET", "getData.php?param=abc", true);
  xhttp.send();
}

在 getData.php 文件中:-

<?php
  $param = $_GET['param'];  // will give you 'abc'
  //mysql queries goes here and get result for second and third dropdown 
  //then echo the result of the query.
  echo array('dropdown2'=>$dropdown2, 'dropdown3'=>$dropdown3);
?>