从数据库填充下拉列表框而无需重新加载页面

Question

I have a database with, say, 450 items in it. Each item has a model number, and a manufacturer ID.

On a search page I have the option to search by Make & Model, but the lists are kind of messy.

Currently, you have to select a make, then hit submit, and then you have another dropdown with a list of models with the same make.

I would like to make it so that when you select the make it will automatically populate the model dropdown selection, using javascript, ajax, jquery or really anything that would make this possible.

I don't have much to go on here as I don't really know the languages well. The real problem I am having is that I don't know how to dynamically fill an array from a database based on what is selected from the first dropdown and then use it to populate the second dropdown.

Any advice/working solutions would be greatly appreciated.

NOTES: Currently, as I said before, you have to select the make, hit submit, then select a model - this is my current code for this, although I don't think it will be much use, using $_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

Probably the best way to do this would be to put the PHP code generating the options list in its own separate file, say get_options.php . Have that return a list of options, in the format

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

using the script that you were using before.

Then, in the initial page, have it make an AJAX request to get_options.php , for example like this:

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

This script will get the make of the car from an input (I'm assuming probably a text input), send it off to get_options.php , recieve the list of <option> s and fill the selector ( id="someSelector" ) with said options. Since is is an AJAX request, rather that PHP, it can be executed at any point after the document has loaded, and will perform the same function. I would recommend using it in the onchange event of the make selector, for example

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

Answer 2

You can use a simple jquery-ajax:

first provide a id to select statement for first selector as

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

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