Question

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

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

这是下拉列表的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['Date'];?>"><?php echo $date['Date'];?></option>
        <?php } ?>
    </select>

这是我到目前为止的JavaScript，但是，如果我执行console.log(classN)，它所做的只是记录所有日期。它实际上并没有过滤任何东西：

$(document).ready(function () { 
    var allOptions = $('#date option')
        $('#collector').change(function () {
            $('#date option').remove();
            var classN = $('#collector option:selected').prop('class');
            var opts = allOptions.filter('.' + classN);
            console.log(opts);
            $.each(opts, function (i, j) {
                $(j).appendTo('#date');
        });
    });
});

Answer 1

jquery加载后无法在页面上运行php。您可以使用ajax，运行查询以从另一个文件中获取第二组选项。

<select id="collector">
    <?php //code to generate initial collector options ?>
</select>
<select id="date">
    <option>--Bill Date--</option>
</select>

在你的jquery中，定位第一个下拉列表然后使用load（）来调用php文件

$(document).ready(function(){   
    $("#collector").on('change', function(){
        filterItems(this.value);
    });     
});
function filterItems(value){    
    var destination = "#date";
    var url = "path/to/filterCode.php?v="+value;
    $(destination).load(url);
});

在filterCode php文件中，获取用户选择的值

$selectedCollector = $_GET['v'];

然后使用$ selectedCollector查询数据库并获取相应的日期选项。

然后，在结果循环中：

echo '<option class="'.$date['Date'].'" value="'.$date['Date'].'">'.$date['Date'].'</option>';

load（）将采用这些回显选项并将它们放入#date。

Answer 2

我认为您需要根据#date下拉值填充#collector下拉列表，根据我的最佳选项是ajax。

这里有一些基本的例子，

<select id="collector">             
    <option value=""></option>
</select>

jut认为这是您的#collector下拉列表，根据您的数据会有一些选项。现在您需要填充#date下拉列表，

 <select id="collector">             
        <option value=""></option>
 </select>

在页面加载中，您可以根据需要加载所有数据。

当#collector下拉列表更改时，您可以发送ajax请求并根据#collector值从数据库中检索数据，就像这样

    $("#collector").on('change', function(){
       $.ajax({
         type: method,
         url: url,
         data: data,
         success: function(response) {
             //populate select box      
         } 
       }); 
   });

以下链接会很有帮助，

How to Use jQuery’s $.ajax() Function

Populate dropdown select with array using jQuery

根据其他下拉选择筛选下拉列表

2 个答案: