Javascript 从数据库填充下拉框而不重新加载页面

我有一个数据库，里面有450个项目。每个项目都有一个型号和一个制造商ID

在搜索页面上，我可以选择按Make&Model进行搜索，但是列表有点乱

目前，您必须选择一个品牌，然后点击submit，然后您将有另一个下拉列表，其中列出具有相同品牌的车型

我希望这样，当您选择make时，它将自动填充模型下拉列表选择，使用javascript、ajax、jquery或任何可能的工具

我在这里没什么可讲的，因为我不太懂这些语言。我面临的真正问题是，我不知道如何根据从第一个下拉列表中选择的内容动态填充数据库中的数组，然后使用它填充第二个下拉列表

如有任何建议/有效解决方案，将不胜感激

注: 目前，正如我前面所说，您必须选择make，点击submit，然后选择一个模型-这是我目前的代码，尽管我认为使用$GET不会有多大用处

<div class="panel panel-info">
                  <div class="panel-heading">
                    <h3 class="panel-title">Model Search</h3>
                  </div>
                  <div class="panel-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#type" aria-controls="type" role="tab" data-toggle="tab">Make</a></li>
                        <li role="presentation"><a href="#model" aria-controls="model" role="tab" data-toggle="tab">Model</a></li>
                    </ul>
                    <div class="tab-content">
                      <div role="tabpanel" class="tab-pane fade in active" id="type">
                          <br>
                                <form method="GET">
                                <div class="input-group">
                                    <?php
                                    $check = mysqli_query($con, "SELECT DISTINCT Make FROM Products ORDER BY Make ASC");
                                        echo '<select name="MAKE" style="width:100%;height:33px;">';
                                            if(strcmp($_GET['MAKE'], '') != 0)
                                                echo '<option value="' . $_GET['MAKE'] . '">' . $_GET['MAKE'] . '</option>';
                                            while($row = mysqli_fetch_array($check)) {
                                                echo '<option value="' . $row["Make"] . '">' . $row["Make"] . '</option>';
                                            }
                                        echo '</select>';
                                    ?>
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" onclick="window.location.href='#model'" type="submit">Find Models</button>
                                  </span>
                                </div><!-- /input-group -->
                                </form>
                      </div>
                      <div role="tabpanel" class="tab-pane fade" id="model">
                                <br>
                                <form method="GET">
                                <div class="input-group">
                                    <?php
                                    $Make = $_GET['MAKE'];
                                    $check = mysqli_query($con, "SELECT * FROM Products WHERE `Make`='$Make' ORDER BY Model ASC");
                                        echo '<input type="hidden" name="MAKE" value="' . $Make . '">';
                                        echo '<select name="UPC" style="width:100%;height:33px;">';
                                            while($row = mysqli_fetch_array($check)) {
                                                echo '<option value="' . $row["UPC"] . '">' . $row["Model"] . '</option>';
                                            }
                                        echo '</select>';
                                    ?>
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" onclick="window.location.href='#model'" type="submit">Search!</button>
                                  </span>
                                </div><!-- /input-group -->
                                </form>
                      </div>
                    </div>
                  </div>
                  <div class="panel-footer"></div>
            </div>

---

最好的方法可能是将生成选项列表的PHP代码放在它自己的单独文件中，比如get_options.PHP。让其返回一个选项列表，格式为

<option value="someValue">someValueName</option>
<option value="someOtherValue">someOtherValueName</option>
<option value="anotherValue">anotherValueName</option>

这个脚本将从一个输入（我假设可能是一个文本输入）中获取汽车的品牌，将其发送到get_options.php，接收s列表并用所述选项填充选择器id=someSelector。因为is是一个AJAX请求，而不是PHP，所以它可以在加载文档后的任何时候执行，并将执行相同的功能。例如，我建议在make选择器的onchange事件中使用它

<input type="text" id="make" onchange="getOptions();">

---

您可以使用简单的jquery ajax：

首先为第一个选择器提供一个要选择的id语句

<select name="MAKE" style="width:100%;height:33px;" id="make">

现在在jquery中

 <script>
    $(function(){
$('#make').change(function(){
var opt=    $('#make').val();
$.ajax({
        url: 'your url of page where you get all data to show according to the value received from your first selector ',
        type: 'get',
        data: opt(data you want to send to get option),
        success: function(response) {
            //response contains all the data you wish to populate and using jquery populate to the select option
        }
    });

});



})
    </script>

---

您的代码中有一个漏洞。我将填充几个javascript数组，其中包含初始页面加载所需的所有内容，然后使用javascript动态填充下拉选择器，就像您所做的那样。。。不需要ajax。@JanSchär它是一个私有软件。“现在不太担心。”奥列索夫斯你认为这是一个有92个品牌的好解决方案吗？每次加载92个阵列？当然。。。您可以使用所有的客户机RAM：。。。您甚至可以通过本地存储将所有内容保存在他的硬盘上：调用get_options.php是URL引用还是路径？

 <script>
    $(function(){
$('#make').change(function(){
var opt=    $('#make').val();
$.ajax({
        url: 'your url of page where you get all data to show according to the value received from your first selector ',
        type: 'get',
        data: opt(data you want to send to get option),
        success: function(response) {
            //response contains all the data you wish to populate and using jquery populate to the select option
        }
    });

});



})
    </script>