從數據庫填充下拉列表框而無需重新加載頁面

Question

我有一個包含450個項目的數據庫。 每個項目都有一個型號和一個制造商ID。

在搜索頁面上，我可以選擇按品牌和型號進行搜索，但是列表有些混亂。

當前，您必須選擇一個品牌，然后單擊“提交”，然后您將在另一個下拉列表中找到具有相同品牌的模型。

我想這樣做，以便當您選擇make時，它會使用javascript，ajax，jquery或其他任何能夠自動實現的模型下拉列表自動填充。

我在這里沒有太多工作，因為我不太了解這些語言。 我遇到的真正問題是，我不知道如何基於從第一個下拉列表中選擇的內容來動態填充數據庫中的數組，然后使用它來填充第二個下拉列表。

任何建議/工作解決方案將不勝感激。

注意：當前，正如我之前說過的，您必須選擇制造商，然后單擊“提交”，然后選擇一個模型-這是我目前的代碼，盡管我認為使用$ _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>

Answer 1

可能最好的方法是將生成選項列表的PHP代碼放在自己的單獨文件中，例如get_options.php 。 讓該返回格式的選項列表

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

使用之前使用的腳本。

然后，在初始頁面中，讓它向get_options.php發出AJAX請求，例如：

function getOptions() {
    make=document.getElementById("make"); //replace with where you actually get the make from
    var xmlRequest = new XMLHttpRequest();
    xmlRequest.onreadystatechange=function(){
        if (xmlRequest.readyState==4 && xmlRequest.status==200) {
            document.getElementById("someSelector").innerHTML = xmlRequest.responseText;
            //someSelector is the ID of your <select> tag.
        }
    }
    xmlRequest.open("GET","get_options.php?MAKE="+make,true);
    xmlRequest.send();
}

該腳本將從輸入中獲取汽車的名稱（我假設可能是文本輸入），將其發送至get_options.php ，接收<option>的列表並填充選擇器（ id="someSelector" ）有上述選擇。 由於是AJAX請求而不是PHP，因此可以在文檔加載后的任何時間執行它，並執行相同的功能。 我建議在make選擇器的onchange事件中使用它，例如

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

Answer 2

您可以使用簡單的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>