根据另一个下拉菜单选择过滤下拉菜单

我使用一些示例数据编写了一个测试用例，并确保它可以工作。这是一个粗糙的例子，但我相信它会做您需要的事情。减少了工作量。对不起，但是我使用了完整的jquery，因为我再也不用做长篇的JavaScript了哈哈（再加上我无法真正跟随您在那儿所做的事情）。

需要有两个文件：index.php和index-ajax.php（为清楚起见）

index.php简介：

// note: these do not need to be in prepared statements (theres no variables inside)
$collect  = $db->query("SELECT DISTINCT [Collector Name] FROM [vSpecial_Billing]");
$names    = $collect->fetchAll();
$billdate = $db->query("SELECT DISTINCT [Date] FROM [vSpecial_Billing]");
$dates    = $billdate->fetchAll();
?>

<form id="testForm" action="">
    <select id="collector">             
        <option value="" selected="selected" disabled="disabled">Collector Name</option>
        <?php foreach($names as $name) { ?>
            <option class="choice" value="<?php echo htmlspecialchars($name['Collector Name']);?>"><?php echo $name['Collector Name'];?></option>
        <?php } ?>
    </select>
    <select id="date">              
        <option value="" selected="selected" disabled="disabled">Bill Date</option>
        <?php foreach($dates as $date) { ?>
            <option class="choice" value="<?php echo $date['Date'];?>"><?php echo $date['Date'];?></option>
        <?php } ?>
    </select>
    <input type="button" id="clearchoices" name="clearchoices" value="Clear Choices" />
</form>

上述注意事项：

• 您只需要按DISTINCT选择即可。无需执行GROUP BY即可获取所有唯一名称或所有唯一日期。
• 我出于习惯将fetchAll的结果放入变量中，但是如果愿意，可以将其移至foreach中。
• 我删除了class您拥有的定义，因为其中有空格的类（对于“收集器名称”而言）可能有问题。
• “清除选项”按钮只是在过滤掉所选内容并超出您的选择范围后如何重置这些选择的示例。

这是javascript部分（在表单之前或之后，或在头部中都包含在index.php中）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="Javascript" type="text/javascript">
$(document).ready(function(){

    $("#collector").change(function(e){
        $.post('index-ajax.php',{filter:'Name',by:$(this).val()},function(data){
            $("#date .choice").hide();
            $.each(data, function(key,row) {
       //       $("#date option[value='"+ row.item +"']").show();
                $("#date option").filter(function(i){
                    return $(this).attr("value").indexOf( row.item ) != -1;
                }).show();
            });
        },"JSON");
    });
    $("#date").change(function(e){
        $.post('index-ajax.php',{filter:'Date',by:$(this).val()},function(data){
            $("#collector .choice").hide();
            $.each(data, function(key,row) {
        //      $("#collector option[value='"+ row.item +"']").show();
                $("#collector option").filter(function(i){
                    return $(this).attr("value").indexOf( row.item ) != -1;
                }).show();
            });
        },"JSON");
    });
    $("#clearchoices").click(function(e){ e.preventDefault();
        $("#collector .choice").show(); $("#collector").val('');
        $("#date .choice").show(); $("#date").val('');
    });

});
</script>

该代码块需要大量解释，因为我将您所有的长篇javascript打包到了jquery中。

• 每个选择在更改时都有自己的处理程序事件。
• 每个选择都会执行自己的post ajax，并使用不同的变量定义进行过滤。
• ajax返回之后，它将所有选项隐藏在OTHER选择中。然后启用由ajax调用的json数据返回的所有选项。可以用不同的方式处理，但是我想提出一种方法。
• 关键是设置"JSON"方法的返回处理程序.post()。您会在中看到原因index-ajax.php。

现在index-ajax.php：

if (isset($_POST['filter']) and isset($_POST['by'])) {// sanity check

    $results = array();

    if (!empty($_POST['by'])) {
        // these _DO_ need to be in prepared statements!!!
        if ($_POST['filter'] == 'Name') { $sql = "SELECT DISTINCT [Date] as item FROM [vSpecial_Billing] WHERE [Collector Name] = ?"; }
        if ($_POST['filter'] == 'Date') { $sql = "SELECT DISTINCT [Collector Name] as item FROM [vSpecial_Billing] WHERE [Date] = ?"; }
        $stmt = $db->prepare($sql);
        $stmt->execute(array($_POST['by']));
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { $results[] = $row; }
    }

    echo json_encode( $results );
    exit;
}

这段代码实际上非常简单。它所做的只是确定要执行的筛选操作，准备sql，然后获取不同的匹配行以进行输出。虽然关键是它输出为json，所以调用此代码的javascript可以更轻松地处理数据！

现在，我已经在测试脚本中构建了所有这些内容，而服务器讨厌“ fetchAll”，因此您的里程可能在某些数据库代码上有所不同。我还省略了所有其他表单代码和数据库设置处理程序以及所有其他内容。弄清楚你对此有把握。

我希望这可以以某种方式帮助您。

编辑11/7

我做了一点更改，因为我没有意识到您数据库中的收集器名称会包含破坏所有这些字符的字符，哎呀。奇数字符处理的两个更改：

• 在select对collector有其option价值包裹htmlspecialchars()。
• 现在jquery，将每个select .change事件过滤的部分通过使用匹配row.item作为直接变量，通过寻找匹配的索引进行过滤。以前，它是在value=' row.item '匹配中使用它的，如果匹配中row.item有单引号（或其他错误字符），它将破坏整个js事件并失败！

通常，当我设置这样的东西时，我会使用ID和唯一的元素ID标签。这样，我只会按数字引用，并且不会遇到奇怪的字符混搭。涉及将所有内容切换为ID的示例，我认为您掌握了现在的情况。