基于另一个选择的Ajax选择

我有一个完美的第一个选择，并显示两个字段和一个与用户选择相关的其他选择。

因此，第二次选择也完美地填充了其他选项，用户必须再次单击一个选项。

然后，必须显示其他4个字段，但这一步不起作用。我的字段没有显示…

它不在我的第二个ajax函数中。我认为这是因为在开始时，我的第二个选择没有创建。

我知道为什么，但我不知道怎么做

让我们看看我的代码。

My ajax:

// 
//FIRST SELECT 
//
jQuery(document).ready(function() {
$('#referenceProduit').change(function(){
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
    var req=$('#referenceProduit').val();
    //requête ajax, appel du fichier function.php
    $.ajax({
        type: "GET",
        url: "include/php.php?referenceProduit="+req,
        dataType : "html",
        //affichage de l'erreur en cas de problème
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
        },
        //function s'il n'y a pas de probleme
        success:function(data){
            //On affiche la réponse du serveur
            $('.produit').empty();
            $('.produit').prepend(data);
            $('input[name=designation]').val($('input:hidden[name=designation]').val());
            $('input[name=prix]').val($('input:hidden[name=prix]').val());
        }
    });
});
//
//SECOND SELECT
//
$('#nomClient').change(function(){
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
    var req2=$('#referenceProduit').val();
    var req=$('#nomClient').val();
    //requête ajax, appel du fichier function.php
    $.ajax({
        type: "GET",
        url: "include/php.php?nomClient="+req+"&referenceProduit="+req2,
        dataType : "html",
        //affichage de l'erreur en cas de problème
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
        },
        //function s'il n'y a pas de probleme
        success:function(data){
            //On affiche la réponse du serveur
            $('.client').empty();
            $('.client').prepend(data);
            $('input[name=nom]').val($('input:hidden[name=nom]').val());
            $('input[name=prenom]').val($('input:hidden[name=prenom]').val());
            $('input[name=telephone]').val($('input:hidden[name=telephone]').val());
            $('input[name=mail]').val($('input:hidden[name=mail]').val());
        }
    });
});
}); 

My PHP:

//
//FIRST SELECT (display 2 fileds and 1 select)
//    
if(isset($_GET['referenceProduit'])){
    $id = $_GET["referenceProduit"];
    $res = $pdo->getLeProduitAjax($id);
    $res2 = $pdo->getClientByProduit($id);
    foreach ($res as $key => $value) {
        echo '<input type="hidden" name="'.$key.'" value="'.$value.'"/>';
    }
    echo '
        <label for="designation" class="col-sm-1 control-label">Désignation</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="designation" id="designation" readonly>
        </div>
        <label for="prix" class="col-sm-1 control-label">Prix </label>
        <div class="input-group col-sm-1">
            <input type="text" class="form-control" aria-describedby="basic-addon2" name="prix" id="prix" readonly>
            <span class="input-group-addon" id="basic-addon2">€</span>
        </div><br/><br/>
        ';

    echo '
        <label for="nomClient" class="col-sm-1 control-label">Client</label>
        <div class="col-sm-2">
            <select class="form-control" name="nomClient" id="nomClient">';
            foreach($res2 as $unClient){
                echo '<option value="'. $unClient['id'].'">'. $unClient['nom'].'</option>';
            }
    echo '</select>
        </div>
        ';
}
 //
 //SECOND SELECT - SHOULD DISPLAYS 4 FIELDS
 //
 if(isset($_GET['nomClient'])){
    $id = $_GET["referenceProduit"];
    $id2 = $_GET["nomClient"];
    $res = $pdo->getContactByClient($id2, $id);
    foreach ($res as $key => $value) {
        echo '<input type="hidden" name="'.$key.'" value="'.$value.'"/>';
    }
    echo '
        <div class="form-group">
          <label for="nomContact" class="col-sm-1 control-label">Nom</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="nom" id="nom" readonly>
          </div>
          <label for="prenomContact" class="col-sm-1 control-label">Prénom</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="prenom" id="prenom" readonly>
          </div>
        </div>
        <div class="form-group">
          <label for="emailContact" class="col-sm-1 control-label">Email</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="email" id="email" readonly>
          </div>
          <label for="telephoneContact" class="col-sm-1 control-label">Téléphone</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="telephone" id="telephone" readonly>
          </div>
        </div>
      </div>
    ';
}

我的HTML:

    <div class="form-group">
  <label for="referenceProduit" class="col-sm-1 control-label">Reference</label>
  <div class="col-sm-2" id="listeProduit">
    <select class="form-control" name="referenceProduit" id="referenceProduit">
      <option selected="selected" disabled="disabled">Choisir</option>
      <?php foreach($lesProduits as $unProduit){?>
      <option value="<?php echo $unProduit['id'];?>"><?php echo $unProduit['reference']?></option>
      <?php } ?>
    </select>
  </div>
</div>
<div class="form-group">
  <div class="produit"></div>
</div><br/><br/>
<div class="form-group">
  <div class="nomClient"></div>
</div>