ajax select на основе другого select

Question

У меня есть первый выбор, который отлично работает и отображает два поля и один другой выбор, связанный с тем, что выбрал пользователь.

Итак, второй выбор также отлично дополняет другие варианты, и пользователю нужно снова нажать на опцию.

А потом, 4 других полей должны быть отображены, но этот шаг не делает работу .. Мои поля не отображается ..

Это не идет внутри моей второй функции 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()); 
     } 
    }); 
}); 
}); 

Мой 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> 

Answer 1

Вы, вероятно, нужно событие делегирование: события не привязаны ко второму выбору, потому что в момент привязки (при загрузке страницы) он еще не существует.

Вы можете сделать это, изменив следующим образом:

$('#nomClient').change(function(){ 

Чтобы что-то вроде этого:

$('body').on('change', '#nomClient', function(){ 

Теперь это событие вызовет даже если #nomClient элемент еще не существовало, когда страница была загружена ,

Answer 2

Поскольку вы добавляете id nomClient динамически и, следовательно, события не будут привязаны к нему, и прямое изменение на нем не будет работать.

Таким образом, вместо этого:

$('#nomClient').change(function(){}); 

Попробуйте это:

$(document).on('change','#nomClient',function(){});