On change filter Leaflet

Question

I want to make dynamic filter on Leaflet, but I got a little problem. so first this my dropdown:

<select id="selc">
<option value="baik">baik</option>
<option value="sedang">sedang</option>
<option value="berat">berat</option>
</select>

and this my filter:

filter: function(feature, layer) {   
    <?php
    $asa = $this->db->query("SELECT du_kode,du_kondisi FROM data_umum inner join data_umum_head on data_umum.duh_id=data_umum_head.duh_id where data_umum_head.maplink_id = '$ml->maplink_id'")->result();
    foreach($asa as $dew){ ?>
        woe = <?= $dew->du_kode?>;
        if(feature.properties.ID==woe){
        wawa = '<?= $dew->du_kondisi?>';

        $('#selc').on('change', function() {                         
        console.log($('#selc').val(),feature.properties.ID,wawa);
        if(wawa == $('#selc').val()){
            return (feature.properties.ID)
            }
        });
      } 
<?php } ?>
},

My problem is why my on.change is not working to return (feature.properties.ID)

but if I do manually and change the code like this

filter: function(feature, layer) {   
<?php
    $asa = $this->db->query("
    SELECT du_kode,du_kondisi FROM data_umum 
    inner join data_umum_head on 
    data_umum.duh_id=data_umum_head.duh_id where 
    data_umum_head.maplink_id = '$ml->maplink_id'")->result();
                        foreach($asa as $dew){ ?>
                            woe = '<?= $dew->du_kode?>';
                            if(feature.properties.ID==woe){
                                wawa = '<?= $dew->du_kondisi?>';
                                /*$('#selc').on('change', function() {
                console.log($('#selc').val(),feature.properties.ID,wawa);
                                    if(wawa == $('#selc').val()){
                                        return (feature.properties.ID)
                                    }
                                });
                                */
                                console.log(wawa);
                                if(wawa == 'berat'){
                                    return (feature.properties.ID)
                                }

                            } 

                        <?php } ?>
                    },

and my results be like this

This is the result I expected, but how can I use it with onchange?

Answer 1

If you look in the Leaflet documentation https://leafletjs.com/reference-1.5.0.html#geojson, you will se the following remark for the filter option of L.geoJSON layer creation method:

Note: dynamically changing the filter option will have effect only on newly added data. It will not re-evaluate already included features.