基于其他下拉选择的过滤器下拉菜单 [英] Filter Dropdown Based on Other Dropdown Selection

问题描述

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

所以我怎么才能正确的每个下拉菜单过滤对方？

这是我的下拉菜单的HTML：

 < select id =collectoronchange =showUser（this.value）> 
< option value =选择禁用>收藏家名称< / 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 =dateonchange =showUser（this.value）> 
< option value =选择禁用>账单日期< / 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> 
  

然而，如果我执行 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'）; 
}）; 
}）; 
} ）; 
  

解决方案

我认为您需要填充 #date 下拉式基于 #collector 下拉值，根据我的最佳选择是ajax。

这里有一些基本的例子，

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

jut认为这是你的 #collector drop将会有一些基于你的数据的选项。现在您需要填充 #date 下拉菜单，

 <选择id =收藏家> 
< option value =>< / option> 
< / select> 
  

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

当 #collector 下拉式更改时，您可以发送ajax请求并根据 #collector value，就像这样

$（b
$ b

  $（＃collector）。on（'change'，function（）{ 
 $ .ajax（{
类型：方法，
 url：url，
 data：data，
成功：函数（响应）{
 //填充选择框
} 
}）; 
}）; 
  

以下链接将有所帮助，

如何使用jQuery的$ .ajax（）函数

使用jQuery填充下拉选择数组

I have 2 separate dropdown lists. I need to get each dropdown to filter each other. Every example I have seen so far is an example for dropdowns that have the options hard-coded in. Mine uses a query to populate the options.

So how could I correctly have each dropdown menu filter each other?

Here is my HTML for the dropdowns:

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

This is the JavaScript that I have so far, however, if I do a console.log(classN), all that it is doing is just logging all of the dates. It doesn't actually filter anything:

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

解决方案

I think you need to populate #date drop-down based on #collector drop-down value, according to me best option is ajax.

here some basic example,

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

jut think this as your #collector drop-down there will be some options based on your data. Now you need to populate #date drop-down,

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

In page load you can load all the data if you want.

when #collector drop-down change you can send ajax request and retrieve data from database based on #collector value, like this

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

Below links will be helpful,

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

Populate dropdown select with array using jQuery

这篇关于基于其他下拉选择的过滤器下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！