javascript - 根据另一个下拉选择过滤下拉列表

Question

我有 2 个单独的下拉列表。我需要让每个下拉菜单相互过滤。到目前为止，我看到的每个示例都是带有硬编码选项的下拉列表示例。我的示例使用查询来填充选项。

那么我怎样才能正确地让每个下拉菜单相互过滤呢？

这是我在 index.php 上的下拉菜单的 HTML:

<select id="collector" onchange="showUser(this.value)">             
    <option value="" selected disabled>Collector Name</option>
        <?php foreach($collect->fetchAll() as $name) { ?>
    <option class="<?php echo $name['Collector Name'];?>" value="<?php echo $name['Collector Name'];?>"><?php echo $name['Collector Name'];?></option>
        <?php } ?>
    </select>

<select id="date" onchange="showUser(this.value)">              
    <option value="" selected disabled>Bill Date</option>
        <?php foreach($bill_date->fetchAll() as $date) { ?>
    <option class="<?php echo $date['Date'];?>" value="<?php echo $date['Collector Name'];?>"><?php echo $date['Date'];?></option>
        <?php } ?>
    </select>

每次在 index.php 上的 script 标签中更改下拉菜单时运行的代码:

function showUser(str) {
  if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;

            var newTableObject = document.getElementById('billing_table');
            sorttable.makeSortable(newTableObject);

        }
        }

    // ---- Gets value of collector dropdown selection -----
        var e = document.getElementById("collector").value;

        $.ajax({
         type: 'GET',
         url: 'index.php',
         data: e,
         success: function(response) {
             console.log(e);
         }
       });                  

    // ---- Gets value of the current selection in any of the dropdowns ----    
        xmlhttp.open("GET","dropdown-display.php?q="+str,true);
        xmlhttp.send();

        document.getElementById('billing_table').style.display = 'none';
    }

$(document).ready(function(){ 
    var $select1 = $( '#collector' ),
        $select2 = $( '#date' ),
    $options = $select2.find( 'option' );

$select1.on( 'change', function() {
    $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
}).trigger( 'change' );


});

查询我的 index.php 页面:

$collector = "SELECT [Collector Name]
  FROM [vSpecial_Billing]
  Group By [Collector Name]";

$billdate = "SELECT [Collector Name], [Date]
  FROM [vSpecial_Billing]
  Group By [Collector Name], [Date]";

我不想将值发送到我的 dropdown-display.php 页面，因为填充下拉列表的查询在我的 index.php 页面上。但是，如果我将 value 变量放入查询中，那么它会在可以进行收集器选择之前在加载时运行该查询，并且我的账单日期下拉列表将不会被填充。

编辑:

• 我将日期下拉选项中的 value 更改为 Collector Name 而不是 Date
• 我还在中间代码块的末尾添加了 $(document).ready(function()
• 我更新了我正在使用的查询

它现在可以正确过滤，但是，在页面加载时，无法选择账单日期。它没有填充任何行。我该如何更改？

此外，当我过滤它时，它默认为列表中的最后一个日期。我怎样才能让它默认为硬编码值，例如“日期”，然后用户可以从过滤值中进行选择？

Answer 1

我使用一些示例数据编写了一个测试用例，并确保它有效。这是一个粗略的例子，但我相信它可以满足您的需求。工作中的麻烦少了很多。对不起，但我使用了完整的 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，因为其中包含空格的类(在收集器名称的情况下)可能有问题。
• Clear Choices 按钮只是一个示例，说明如何在筛选和筛选超出您的选择范围后重置这些选择。

这是 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>

那个 block 需要很多解释，因为我把你所有的手写 javascript 打包到 jquery 中。

• 每个 select 都有自己的处理程序事件。
• 每个选择都有自己的 post ajax，并定义了不同的变量来过滤。
• ajax 返回后，它会隐藏 OTHER 选择中的所有选项。然后启用由 ajax 调用的 json 数据返回的所有选项。这可以有不同的处理方式，但我想介绍一种方法。
• 关键是为 .post() 方法的返回处理程序设置 "JSON"。您会在 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

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

• collector 的select 的option 值包含在htmlspecialchars() 中。
• jquery 部分用于每个 select .change 事件过滤器，现在通过查找匹配索引进行过滤，使用 row.item 作为直接变量。之前，它在 value=' row.item ' 匹配中使用它，如果 row.item 有单引号(或其他错误字符)，它将中断整个 js 事件并失败!

通常，当我设置这样的东西时，我会使用 ID 和唯一元素 ID 标签。这样我就只会用数字来引用，而不会遇到奇怪的字符混搭。将涉及将所有内容切换为 ID 的示例，我认为您已经了解了现在发生的事情的要点。