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

Question

I have a select html which contains select sql statement. Let's call this Select A. If select A is changed to a value, select B and select C will change dependent on the data from select A's select sql statement. The method that i tried and failed is revolves around using onchange on Select A. It will then call a function. This function however needs to read from a php variable to get the value. But we know that PHP does not work in javascript.

Another method that i can think of is to use a window refresh function again on onchange of Select A. The refreshed page will then $_GET the value from the url link (eg: terminalassign.php?id=1&terminalposition=here& ...) But again it uses onchange and therefore unable to obtain PHP value in javascript.

Anyone have any idea to go about this?

This is my code:

The function on the 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>

Body

        <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

So this is how things can be easier with the help of Ajax

First call the JavaScript function on change of first dropdown, which contains ajax call.

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();
}

In getData.php file :-

<?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);
?>