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

Question

我的 php/html 页面中有 3 个下拉菜单（我正在使用 jooomla 3x 和 jumi 将脚本文件添加到我的文章中）表单正在从 MySQL 数据库 table 中填充.

表单中的操作属性是将表单发送到第二页并附上感谢信息，并向管理员和用户发送电子邮件（再次使用 jumi 来实现此目的）。可能会改变这种逻辑——如果没有其他办法（这将是一项长期的工作）。因此，目前我无法使用表单的自我操作事件属性。

我成功地从 MySQL 数据库 table 填充了第一个下拉列表（代码如下）。

我还设法使用 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 但我会使用简单的 javascript 和 ajax 首先让我们创建我们的 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
        ?>

然后在您的第一个 dropdwon 中执行以下操作

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

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

populate second dropdown on onchange event

php

jquery

html

mysql

joomla3.0