Question

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

在搜索页面上，我可以选择Make＆amp ;;模型，但列表有点混乱。

目前，您必须选择一个品牌，然后点击提交，然后您还有另一个下拉列表，其中包含具有相同品牌的品牌列表。

我想这样做，当你选择make时，它会自动填充模型下拉列表选项，使用javascript，ajax，jquery或任何能够实现此功能的东西。

由于我不太了解这些语言，所以我没有太多可去的地方。我遇到的真正问题是，我不知道如何根据从第一个下拉列表中选择的内容从数据库中动态填充数组，然后使用它来填充第二个下拉列表。

非常感谢任何建议/工作解决方案。

注意：目前，正如我之前所说，你必须选择make，点击提交，然后选择一个模型 - 这是我目前的代码，虽然我不认为它会有很大用处，使用$ _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：

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

\DB::table('Test')->insert(
    array(
        'NullableInt' => null,
        'NullableVarchar' => DB::raw('NULL'),
    )
);

现在在jquery

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

在不重新加载页面的情况下从数据库填充下拉框

2 个答案: