2nd Selectpicker on change event not works

Question

I have two selectpicker. One for city and other for towns. When citySelectpicker changes I load towns with AJAX.

There is no problem with this. When I try to get on change event on TownSelect nathing happens. TownSelect onchange not working.

But I refresh page. And directly change the townSelect Change event works. but before it I use CityChange it is not work.

index.php

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-select.css" />
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.css">

    <?php
    header("Cache-Control: no cache");
    ?>

</head>


<body>

<div class="cityList col-lg-3 col-md-6 col-sm-3">
    <label for="citySelect2" class="labelsfilter ml-2">City</label>
    <select class="selectpicker mb-3" id="citySelect2" name="citySelect2" data-width="100%" data-live-search="false" required="required">
        <option value="">Select City</option>
    <?php
    $myQuery = "SELECT * FROM tessCityTable";
    $statement = $konn->prepare($myQuery);
    $statement->execute();
    $results = $statement->fetchAll(PDO::FETCH_ASSOC);
    if ($results){
        foreach ($results as $result){
            if (isset($cityID2)){
                if ($cityID2 == $result['cityID']){
                    echo ('<option value="'.$result['cityID'].'" selected>'.$result['cityName'].'</option>');
                }
                else {
                    echo ('<option value="'.$result['cityID'].'">'.$result['cityName'].'</option>');
                }
            }
            else {
                echo ('<option value="'.$result['cityID'].'">'.$result['cityName'].'</option>');
            }
            
        }
    }

    ?>
    </select>
</div>                  

<div id="townList2" class="townList2 col-lg-3 col-md-6 col-sm-3">
    <label for="townSelect2" class="labelsfilter ml-2">Town</label>
    <select class="selectpicker mb-3 show-tick townSelect2" id="townSelect2" name="townSelect2[]" multiple="multiple" data-live-search="false" data-width="100%" data-selected-text-format="count">
        <option value="0">Select Town</option>
    </select>
</div>

</body>

</html>

<script>            
$(document).ready(function() {
    $('#townSelect2').selectpicker();

    $("#citySelect2").change(function() {
        var selectedCity = $(this).val();

        $.ajax({
            type: "POST",
            url: "query.php",
            data: 'keyword=' + selectedCity,
            success: function(data) {
                var response = JSON.parse(data);

                $('.townList2').html(response.townList);
                $('.townSelect2').selectpicker('refresh');

            }
        });
    });

    $('#townSelect2').on('changed.bs.select', function(e) {
        //Nothing Happens
            console.log("changed.bs.select event triggered");
            console.log("e:", e);
        
    });


    $("#townSelect2").change(function() {
        //Nothing Happens
        console.log("changeEvent");
    });

})

</script>

And query.php

if (!empty($_POST["keyword"])) {
    $townList = "";
    $cityID = $_POST['keyword'];
    $myQuery = "SELECT * FROM tessTownTable WHERE cityID=:cityID";
    $statement = $konn->prepare($myQuery);    
    $statement->bindParam(':cityID', $cityID);
    $statement->execute();
    $result = $statement->fetchAll(PDO::FETCH_ASSOC);
    if (!empty($result)) {
        
        $townList = $townList . '<label for="townSelect2" class="labelsfilter ml-2">İlçe</label>';
        $townList = $townList . '<select class="selectpicker mb-3 show-tick townSelect2" id="townSelect2" name="townSelect2[]" multiple="multiple" data-live-search="false" data-width="100%" data-selected-text-format="count">';
        $townList = $townList . '<option value="0">İlçe Seçiniz</option>';
  
        foreach ($result as $town) { 
            $townList = $townList . '<option value="'.$town['townID'].'">'.$town['townName'].'</option>';
        }
        $townList = $townList . '</select>';

        $konn = null;
        $statement = null;

        $response = array(
            "townList" => $townList
        );
        
        $jsonResponse = json_encode($response);

        echo $jsonResponse;  
    }
}

score 0 · Answer 1 · answered Jun 09 '23 at 12:21

Here is an answer. But I really dont want to use obServer. but cant find any solution If I find anything without obServer I will update the answer.

Please check the Javascript part.

    <!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-select.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <?php
    header("Cache-Control: no cache");
    ?>
</head>

<body>

    <div class="cityList col-lg-3 col-md-6 col-sm-3">
        <label for="citySelect2" class="labelsfilter ml-2">City</label>
        <select class="selectpicker mb-3" id="citySelect2" name="citySelect2" data-width="100%" data-live-search="false" required="required">
            <option value="">Select City</option>
            <?php
            $myQuery = "SELECT * FROM tessCityTable";
            $statement = $konn->prepare($myQuery);
            $statement->execute();
            $results = $statement->fetchAll(PDO::FETCH_ASSOC);
            if ($results) {
                foreach ($results as $result) {
                    if (isset($cityID2)) {
                        if ($cityID2 == $result['cityID']) {
                            echo ('<option value="' . $result['cityID'] . '" selected>' . $result['cityName'] . '</option>');
                        } else {
                            echo ('<option value="' . $result['cityID'] . '">' . $result['cityName'] . '</option>');
                        }
                    } else {
                        echo ('<option value="' . $result['cityID'] . '">' . $result['cityName'] . '</option>');
                    }
                }
            }
            ?>
        </select>
    </div>

    <div id="townList2" class="townList2 col-lg-3 col-md-6 col-sm-3">
        <label for="townSelect2" class="labelsfilter ml-2">Town</label>
        <select class="selectpicker mb-3 show-tick townSelect2" id="townSelect2" name="townSelect2[]" multiple="multiple" data-live-search="false" data-width="100%" data-selected-text-format="count">
            <option value="0">Select Town</option>
        </select>
    </div>

    <script>
        $(document).ready(function() {
            $('#townSelect2').selectpicker();

            $("#citySelect2").change(function() {
                var selectedCity = $(this).val();

                $.ajax({
                    type: "POST",
                    url: "query.php",
                    data: 'keyword=' + selectedCity,
                    success: function(data) {
                        var response = JSON.parse(data);

                        $('.townList2').html(response.townList);
                        $('#townSelect2').selectpicker('refresh');

                        $('#townSelect2').on('changed.bs.select', function(e) {
                            console.log("changed.bs.select event triggered");
                            console.log("e:", e);
                        }).trigger('change'); 

                    }
                });
            });

            $("#townSelect2").change(function() {
                console.log("changeEvent");
            });

            
            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === "childList" && mutation.target.id === "townSelect2") {
                        console.log("townSelect2 DOM değişikliği");
                        console.log(mutation);
                    }
                });
            });

            
            observer.observe(document.getElementById("townSelect2"), {
                childList: true, 
                subtree: true 
            });

        });
    </script>

</body>

</html>

Lapskaus · Answer 2 · 2023-06-09T14:57:46.433

[TL:DR]:

swap

$('#townSelect2').on('changed.bs.select', function() {...})

with

$('body').on('changed.bs.select', '#townSelect2', function() {...})

and use

$('.townList2').replaceWith(response.townList);

instead of

$('.townList2').html(response.townList);

You need to use event delegation in order to use an event on a dynamically added element like your townSelect2 - select.

Explanation:

If you attach an event handler for the changed.bs.select- event to all elements with the id townSelect2 that event will get attached to all elements with the id townSelect2 that are present in the DOM when the script is being loaded. That means, that you have to either attach the event again when you dynamically add an element to the DOM, like you do in your ajax success, or that you need to delegate the event to a parent element that in fact is present when your DOM loads.

/* Attach the event to the body (or any other parent element of your select)
  the event will then bubble up until it "finds" the element with the 
  townSelect2 id and trigger */
$('body').on('changed.bs.select', '#townSelect2', function() {...})

Also, you are returning a completed <select> ELement from your PHP endpoint, but you are inserting it in your current <select>selemt with .html(...). You need to replace it, in order to prevent invalid HTML like this :

<select class="..." id="..."><select class="..." id="...">...</select></select>

It is not work when multiselect. When citySelect changes It works. but in townSelect It is not work — Tugrul, Jun 09 '23 at 14:42
also: use `$('.townList2').replaceWith(response.townList);` instead of `$('.townList2').html(response.townList);`. You are returning the whole `` element from your PHP and adding it as a child to your existing ` — Lapskaus, Jun 09 '23 at 14:55

2nd Selectpicker on change event not works

2 Answers2