Filter Dropdown Based on Other Dropdown Selection

问题:

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

回答1:

jquery can't run php on the page once it is loaded. You could use ajax, running the query to get the second set of options from another file.

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

In your jquery, target the first dropdown and then use load() to call a php file

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

In the filterCode php file, get the value selected by the user

$selectedCollector = $_GET['v'];

Then use $selectedCollector to query your database and get the appropriate date options.

Then, inside your results loop:

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

The load() will take these echoed options and put them into #date.

回答2:

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