在onchange事件中填充第二個下拉列表

Question

我的php / html頁面中有3個下拉列表（我正在使用jooomla 3x和jumi將腳本文件放到我的文章中）表格從MySQL數據庫表中填充。

表單中的Action屬性是將包含感謝消息的表單發送到第二頁，並向管理員和用戶發送電子郵件（再次使用jumi實現此目的）。 可能會改變這種邏輯-如果沒有其他方法（這將是漫長的工作）。 因此，當前我無法使用表單的自我行動事件屬性。

我設法從MySQL數據庫表中成功填充了第一個下拉列表（下面的代碼）。

我也設法使用jquery在html的div中獲得了第一個下拉列表中選定的值-但是，如何在第一個下拉列表觸發onchange事件時級聯相同的邏輯？ 而不刷新整個頁面並失去所有先前的表單選擇？

這是我的代碼

      <script type="text/javascript"> window.onload = function(){
            document.getElementById('make').addEventListener('change',function(){
                var $strmake = document.getElementById("make").value;
                //alert($strmake);
                document.getElementById("div1").innerHTML = $strmake;
            });
        }

我的第一個下拉列表正常運行

                <select name="make" id="make" style="font-size:1.3em;padding:5;height:40px;">
            <option selected>Select Make</option>
            <?php
                // credentials
                $host_name  = xxx
                $database   = xxx
                $user_name  = xxx
                $password = xxx


                $connect = mysqli_connect($host_name, $user_name, $password, $database) or die("Error " . mysqli_error($connect));
                if (mysqli_connect_errno())
                {
                    echo "Failed to connect to MySQL: " . mysqli_connect_error();
                }
                else {
                    echo "Connected to MySQL<br>";
                }

                //execute the SQL query and return records
                $query = "SELECT distinct make FROM VehicleModelYear ORDER BY make";

                $result = mysqli_query($connect, $query); 

                //fetch tha data from the database 
                while($row = mysqli_fetch_array($result)) { 
                  echo "<option value='" . $row['make'] . "'>" . $row['make'] . "</option>"; 
                } 
            ?>
            </select>

第二個下拉代碼

                <SELECT name="model" class="" id="model" style="font-size:1.3em;padding:5;height:40px;">
            <OPTION selected>Select Model</OPTION>
            <?php

                $connect = mysqli_connect($host_name, $user_name, $password, $database) or die("Error " . mysqli_error($connect));
                if (mysqli_connect_errno())
                {
                    echo "Failed to connect to MySQL: " . mysqli_connect_error();
                }
                else {
                    echo "Connected to MySQL<br>";
                }

                $selected = explode(',', $_POST['make']);
                $s_id = $selected[0];
                $s_name = $selected[1];

                //execute the SQL query and return records
                $query = "SELECT distinct model FROM VehicleModelYear where ????? ORDER BY model";

                $result = mysqli_query($connect, $quer2); 

                //fetch tha data from the database 
                while($row = mysqli_fetch_array($result)) { 
                  echo "<option value='" . $row['model'] . "'>" . $row['model'] . "</option>"; 
                } 
            ?>
            </SELECT>

如果我有第二種解決方案，希望我能實現第三種？

提前致謝...

Answer 1

嗨，我不知道jquery但首先我將對ajax使用簡單的javascript ，讓我們創建ajax調用

<script type="text/javascript">
    function getMake(make){
 var data = new XMLHttpRequest();
data.open("POST","make.php");

data.onreadystatechange = function(){
  if(data.readyState === 4 && data.status === 200){
    document.getElementById('model').innerHTML = data.responseText;

  }
}
data.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data.send('make='+make);
}
</script>

創建model.php文件

<?php

            $connect = mysqli_connect($host_name, $user_name, $password, $database) or die("Error " . mysqli_error($connect));
            if (mysqli_connect_errno())
            {
                echo "Failed to connect to MySQL: " . mysqli_connect_error();
            }
            else {
                echo "Connected to MySQL<br>";
            }
            $make = $_POST['make']
            $selected = explode(',', $make);
            $s_id = $selected[0];
            $s_name = $selected[1];

            //execute the SQL query and return records
            $query = "SELECT distinct model FROM VehicleModelYear where ????? ORDER BY model";

            $result = mysqli_query($connect, $quer2); 

            function createDropDown($result){
            echo '<OPTION selected>Select Model</OPTION>';
            //fetch tha data from the database 
            while($row = mysqli_fetch_array($result)) { 
              echo "<option value='" . $row['model'] . "'>" . $row['model'] . "</option>"; 
            } 
            }
           createDropDown($result); //calling the function
        ?>

然后在您的第一個下拉菜單中執行以下操作

<select name="make" id="make" style="font-size:1.3em;padding:5;height:40px;" onchange="getMake(this.value)">

將您的第二個下拉菜單更改為此

<SELECT name="model" class="" id="model" style="font-size:1.3em;padding:5;height:40px;"></SELECT>