Event change sur liste déroulante dynamique ne se déclenche pas

thirt05
Javascript

Bonjour,

quand j'essaie de rentrer dans l'événement change() d'une liste déroulante dynamique, il n'exécute pas le code qui se trouve à l'intérieur.

Il n'intercepte pas l'event suivant : $('#country-'+$('#COUN_ID').val()).change(function(event){});

voici mon code javascript :

(function($){
    var postcodes_table = {};

    $("#post_codes select").each(function(){
        // Pour éviter de réutiliser le selecteur tout le temps
        var select_postcode = $(this);

        postcodes_table[select_postcode.attr('id')] = select_postcode;

        select_postcode.remove();
    });

    $('#COUN_ID').change(function(event){
        var country_id = $(this).val();

        if (country_id == 0)
        {
            $("#post_codes").hide();
        }
        else
        {
            $("#post_codes").show();

            $("#post_codes").empty().append(postcodes_table['country-'+country_id]);
        }
    }).trigger('change');

    var cities_table = {};

    $("#cities select").each(function(){
        var select_city = $(this);

        cities_table[select_city.attr('id')] = select_city;

        select_city.remove();
    });

    $('#country-'+$('#COUN_ID').val()).change(function(event){
        var postal_code_id = $(this).val();

        if (postal_code_id == 0)
        {
            $("#cities").hide();
        }
        else
        {
            $("#cities").show();

            $("#cities").empty().append(cities_table['postcode-'+postal_code_id]);
        }
    }).trigger('change');
})(jQuery);

Voici le code HTML :

        <!-- Registration Form -->
        <div class="row">
            <div class="col-lg-4 offset-lg-4 bg-light rounded register-class" id="register-box">
                <h2 class="text-center mt-2">Register</h2>
                <form action="" method="post" role="form" class="p-2" id="register-form">
                    <div class="form-group countries" id="countries">
                        <select name="COUN_ID" id="COUN_ID" class="form-control">
                            <option value="0">Sélectionnez un pays ...</option>
                            <?php foreach ($countries as $country): ?>
                                <option value="<?= $country->COUN_ID; ?>"<?= $country_id == $country->COUN_ID ? ' selected' : ''; ?>><?= $country->COUN_TITLE; ?></option>
                            <?php endforeach ?>
                        </select>
                    </div>
                    <div class="form-group postcodes" id="post_codes">
                        <?php foreach ($postcodesByCountry as $countryId => $postalCodes): ?>
                            <select name="POST_ID" id="country-<?= $countryId; ?>" class="form-control">
                                <option value="0">Sélectionnez un code postal ...</option>
                                <?php foreach ($postalCodes as $postalCodeId => $postalCodeName): ?>
                                    <option value="<?= $postalCodeId; ?>"<?= $postcode_id == $postalCodeId ? ' selected' : ''; ?>><?= $postalCodeName; ?></option>
                                <?php endforeach ?>
                            </select>
                        <?php endforeach ?>
                    </div>
                    <div class="form-group cities" id="cities">
                        <?php foreach ($citiesByCountry as $postCodeId => $towns): ?>
                            <select name="CITY_ID" id="postcode-<?= $postCodeId; ?>" class="form-control">
                                <option value="0">Sélectionnez une ville ...</option>
                                <?php foreach ($towns as $townId => $townName): ?>
                                    <option value="<?= $townId; ?>"<?= $city_id == $townId ? ' selected' : ''; ?>><?= $townName; ?></option>
                                <?php endforeach ?>
                            </select>
                        <?php endforeach ?>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="register-btn" id="register-btn" value="Inscription" class="btn btn-primary btn-block">
                    </div>
                </form>
            </div>
        </div>

Avez-vous une idée à propos du fait que l'événement change() ne se déclenche pas ?

Est-ce possible de déclencher un event sur un sélecteur dont le nom est dynamique (ex : country-1, country-2, ...) ?

Merci d'avance

Bonne journée
Thierry

13 réponses

Pierrot01

Est-ce possible de déclencher un event sur un sélecteur dont le nom est dynamique (ex : country-1, country-2, ...) ?

oui, en lui mettant une classe et en déclenchant l'event sur la classe

@plus

Pierre

Lartak

Bonjour.
Tu devrais plutôt essayer :

$('[id^="country-"]').change(function() {
    // ...
});
thirt05
Auteur

Bonjour à tous,

tout d'abord, merci pour vos réponses.

J'ai essayé la solution de Lartak mais, malheureusement, l'événement ne se déclenche toujours pas.

    $('[id^="country-"]').change(function(event){
        var postal_code_id = $(this).val();

        alert('postcode <'+postal_code_id+'>');

        if (postal_code_id == 0)
        {
            // permet de cacher la liste déroulante avec les codes postaux si aucun pays n'est sélectionné
            $("#cities").hide();
        }
        else
        {
            // permet d'afficher la liste déroulante avec les codes postaux du pays sélectionné
            $("#cities").show();

            // je prends la div qui a l'id post_codes et je la vide et je lui ajoute la liste déroulante correspondante
            // au pays choisi.
            $("#cities").empty().append(cities_table['postcode-'+postal_code_id]);

            // permet de montrer les codes postaux du pays dont l'id est celui qui a été  sélectionné et de cacher
            // tous les autres éléments qui sont au même niveau (les codes postaux des autres pays).
            // $('#postcode-'+postal_code_id).show().siblings().hide();
        }
    }).trigger('change');

Par contre, je ne vois pas trop ce que Pierrot veut dire avec la classe. Comment tester cela et sur quel event ?

Merci à tous,

Bon dimanche
Thierry

Pierrot01

salut,
comme ça :

html

    <select name="POST_ID" id="country-1;" class="form-control country">
            ......................
    <select name="POST_ID" id="pas-country-1;" class="form-control">
            ......................
    <select name="POST_ID" id="country-2;" class="form-control country">
            ......................
    <select name="POST_ID" id="xxxxxxcountry-1;" class="form-control">
            ......................
    <select name="POST_ID" id="country-2;" class="form-control country">
            ......................

javascript :

    $(".country").on("change",function(e){
        // trappe l'eveneùent change sur country-1, country-2 et country-3 parqu'ils on une classe country class =" class="form-control **country**">" 

    )

j'espere que tu as compris maintenant.

@plus
Pierre

thirt05
Auteur

Bonjour Pierre,

merci pour votre réponse rapide à mon message.

J'ai essayé comme vous avez dit mais malheureusement, rien ne se passe.

Voici le code javascript/jQuery :

    **$(".clspostcode").on("change",function(e)**{
        var postal_code_id = $(this).val();

        if (postal_code_id == 0)
        {
            $("#cities").hide();
        }
        else
        {
            $("#cities").show();

            $("#cities").empty().append(cities_table['postcode-'+postal_code_id]);
        }
    }).trigger('change');

Voici le code HTML :

                    <div class="form-group countries" id="countries">
                        <select name="COUN_ID" id="COUN_ID" class="form-control">
                            <option value="0">Sélectionnez un pays ...</option>
                            <?php foreach ($countries as $country): ?>
                                <option value="<?= $country->COUN_ID; ?>"<?= $country_id == $country->COUN_ID ? ' selected' : ''; ?>><?= $country->COUN_TITLE; ?></option>
                            <?php endforeach ?>
                        </select>
                    </div>
                    <div class="form-group postcodes" id="post_codes">
                        <?php foreach ($postcodesByCountry as $countryId => $postalCodes): ?>
                            <select name="POST_ID" id="country-<?= $countryId; ?>" class="form-control **clspostcode**">
                                <option value="0">Sélectionnez un code postal ...</option>
                                <?php foreach ($postalCodes as $postalCodeId => $postalCodeName): ?>
                                    <option value="<?= $postalCodeId; ?>"<?= $postcode_id == $postalCodeId ? ' selected' : ''; ?>><?= $postalCodeName; ?></option>
                                <?php endforeach ?>
                            </select>
                        <?php endforeach ?>
                    </div>
                    <div class="form-group cities" id="cities">
                        <?php foreach ($citiesByCountry as $postCodeId => $towns): ?>
                            <select name="CITY_ID" id="postcode-<?= $postCodeId; ?>" class="form-control">
                                <option value="0">Sélectionnez une ville ...</option>
                                <?php foreach ($towns as $townId => $townName): ?>
                                    <option value="<?= $townId; ?>"<?= $city_id == $townId ? ' selected' : ''; ?>><?= $townName; ?></option>
                                <?php endforeach ?>
                            </select>
                        <?php endforeach ?>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="register-btn" id="register-btn" value="Inscription" class="btn btn-primary btn-block">
                    </div>

Merci à vous.

Bon dimanche,
Thierry

Pierrot01

salut

$(".clspostcode").on("change",function(e){
        var postal_code_id = parseInt($(this).val());
        if (postal_code_id == 0) {
            $("#cities").hide();
        }else{
            $("#cities").show();
            $("#cities").empty().append(cities_table['postcode-'+postal_code_id]);
        }
    });

je ne vois pas ce que le .trigger('change') vient faire là :D

et faut pas mettre ** avant le nom de la classe
j'avais mis ça pour les isoler ;)

a++

thirt05
Auteur

Bonjour Pierre,

encore merci pour votre réponse rapide.

En fait, je n'ai pas mis ** dans mon code. C'est au niveau du forum grafikart que j'ai demandé de mettre cette chaîne de caractères en gras.

.trigger('change') => permet de dire qu'on va exécuter cet event 'change' dès le début pour qu'il teste la valeur. On exécute comme si on venait de changer la valeur et automatiquement, ça exécutera tout le reste du code. Cela évite de réécrire deux fois la même fonction.

Donc, malheureusement, j'ai fait comme vous avez spécifié dans le message mais, malheureusement, l'événement ne se déclenche pas. Je ne comprends pas pourquoi car tout a l'air bon.

Merci d'avance à vous.

Bonne journée
Thierry

Pierrot01

essaye comme ça

$( ".classecible" ).change(function() {
  alert( "change appellé!!!!" );
});
thirt05
Auteur

Bonjour Pierre,

encore merci pour vos réponses ...

J'ai donc fait comme vous m'avez dit de faire mais je n'ai pas le message d'alerte qui s'affiche.

Code javascript/jQuery :

$('.clspostcode').change(function(){
   alert('change appelé !!!');
});

Code HTML :

                <div class="form-group postcodes" id="post_codes">
                    <?php foreach ($postcodesByCountry as $countryId => $postalCodes): ?>
                        <select name="POST_ID" id="country-<?= $countryId; ?>" class="form-control clspostcode">
                            <option value="0">Sélectionnez un code postal ...</option>
                            <?php foreach ($postalCodes as $postalCodeId => $postalCodeName): ?>
                                <option value="<?= $postalCodeId; ?>"<?= $postcode_id == $postalCodeId ? ' selected' : ''; ?>><?= $postalCodeName; ?></option>
                            <?php endforeach ?>
                        </select>
                    <?php endforeach ?>
                </div>

Merci pour votre aide.

Bon dimanche à vous,
Thierry

Pierrot01

met le code complet ;)
php html et javascript

a+

Lartak

mais je n'ai pas le message d'alerte qui s'affiche.

Vérifies que dans la console qu'il n'y ait pas d'erreur qui t'es retourné, car si ça se trouve tu as une erreur qui bloque les évènements qui doivent se faire.
Et si c'est le cas, tu auras beau modifier ce code autant de fois que tu veux, ça ne fonctionnera toujours pas pour autant.

thirt05
Auteur

Bonjour à vous,

merci pour vos réponses.

Je n'ai aucun erreur javascript. Je ne vois aucune erreur dans la console.

En fait, quand je sélectionne les pays, il intercepte bien l'événement change pour afficher les codes postaux par pays.

Par contre, quand je sélectionne un code postal, il n'intercepte pas le change sur les codes postaux et n'affiche donc pas les villes par code postal.

La seule différence, c'est que l'id de la liste déroulante des codes postaux est un id dynamique par rapport à celui des pays qui est une chaîne de caractères.

Encore merci pour votre aide.

Bon dimanche à vous,
Thierry

thirt05
Auteur

Bonjour Pierre,

voici donc mon code :

Code javascript/jQuery :

(function($){
    // Gestion des codes postaux par pays
    var postcodes_table = {};

    $("#post_codes select").each(function(){
        var select_postcode = $(this);

        postcodes_table[select_postcode.attr('id')] = select_postcode;
        select_postcode.remove();
    });

    $('#COUN_ID').change(function(event){
        var country_id = $(this).val();

        if (country_id == 0)
        {
            $("#post_codes").hide();
        }
        else
        {
            $("#post_codes").show();
            $("#post_codes").empty().append(postcodes_table['country-'+country_id]);
        }
    }).trigger('change');

    // Gestion des villes par code postal
    var cities_table = {};

    $("#cities select").each(function(){
        var select_city = $(this);

        cities_table[select_city.attr('id')] = select_city;
        select_city.remove();
    });

    //$('#country-'+$('#COUN_ID').val()).change(function(event){
    $('[id^="country-"]').change(function(event){
        var postal_code_id = $(this).val();

        if (postal_code_id == 0)
        {
            $("#cities").hide();
        }
        else
        {
            $("#cities").show();
            $("#cities").empty().append(cities_table['postcode-'+postal_code_id]);
        }
    }).trigger('change');
})(jQuery);

Code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="thirt" />
    <meta name="description" content="gestion des villes">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Responsive registration form</title>
    <link rel="stylesheet" type="text/css" href="../../public/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/registration.css" />
</head>
<body class="bg-dark">
    <div class="container mt-4">
        <div class="row">
            <div class="col-lg-4 offset-lg-4 alert-class" id="alert">
                <div class="alert alert-success">
                    <strong id="result"></strong>
                </div>
            </div>
        </div>
        <!-- Registration Form -->
        <div class="row">
            <div class="col-lg-4 offset-lg-4 bg-light rounded register-class" id="register-box">
                <h2 class="text-center mt-2">Register</h2>
                <form action="" method="post" role="form" class="p-2" id="register-form">
                    <div class="form-group countries" id="countries">
                        <select name="COUN_ID" id="COUN_ID" class="form-control">
                             <option value="0">Sélectionnez un pays ...</option>
                             <option value="1">Belgique</option>
                             <option value="2">France</option>
                             <option value="3">Maroc</option>
                        </select>
                    </div>
                    <div class="form-group postcodes" id="post_codes">
                        <select name="POST_ID" id="country-1" class="form-control clspostcode">
                           <option value="0">Sélectionnez un code postal ...</option>
                           <option value="1">1000</option>
                           <option value="2">5000</option>
                           <option value="3">4000</option>
                           <option value="4">8000</option>
                           <option value="5">2000</option>
                           <option value="6">6000</option>
                           <option value="7">5300</option>
                           <option value="8">4500</option>
                           <option value="9">4520</option>
                           <option value="10">9000</option>
                        </select>
                        <select name="POST_ID" id="country-2" class="form-control clspostcode">
                           <option value="0">Sélectionnez un code postal ...</option>
                           <option value="11">57000</option>
                        </select>
                        <select name="POST_ID" id="country-3" class="form-control clspostcode">
                           <option value="0">Sélectionnez un code postal ...</option>
                           <option value="12">40000</option>
                        </select>
                    </div>
                    <div class="form-group cities" id="cities">
                        <select name="CITY_ID" id="postcode-7" class="form-control">
                           <option value="0">Sélectionnez une ville ...</option>
                           <option value="1">Petit-Warêt</option>
                           <option value="2">Seilles</option>
                           <option value="3">Andenne</option>
                        </select>
                        <select name="CITY_ID" id="postcode-9" class="form-control">
                           <option value="0">Sélectionnez une ville ...</option>
                           <option value="4">Wanze</option>
                           <option value="5">Antheit</option>
                           <option value="6">Vinalmont</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="register-btn" id="register-btn" value="Inscription" class="btn btn-primary btn-block">
                    </div>
                </form>
            </div>
        </div>
        <script type="text/javascript" src="../../public/js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="../../public/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/registration.js"></script>
        <script type="text/javascript" src="js/linked_select.js"></script>
    </div>
</body>
</html>

J'espère que vous avez tout le code dont vous avez besoin. Si ce n'est pas le cas, n'hésitez pas à revenir près de moi.

Encore merci pour votre aide.

Bonne journée
Thierry