ajax选择基于另一个选择。

I have a first select which is working perfectly and displays two fields and one other select related with what the user chose.

我有一个第一个选择，它运行完美，显示两个字段和一个选择与用户选择的相关。

So, the second select is also filling perfectly with other choices and the user have to click again on an option.

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

And then, 4 others fields have to be displayed, but this step doest not work .. My fields are not displayed ..

然后，其他4个字段必须显示出来，但是这个步骤是行不通的。我的字段没有显示。

It not goes inside of my second ajax function. I think it's beacause at the begining, my second select is not created.

它不会进入第二个ajax函数中。我想这是因为开始的时候，我的第二个选择没有创建。

I know why but i do not know how to do ..

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

I hope you will help me. ;)

我希望你能帮助我。,)

Let see my code.

让看到我的代码。

My ajax :

我的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 :

我的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>
    ';
}

MY HTML :

我的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>

2 个解决方案

#1

You probably need event delegation: The events are not bound to your second select because at the moment of binding (on page load) it does not exist yet.

您可能需要事件委托:事件不绑定到您的第二个select，因为在绑定的时候(在页面加载上)它还不存在。

You can do that by changing this:

你可以通过改变这个来做到这一点:

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

To something like this:

是这样的:

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

Now this event will trigger even if the #nomClient element did not exist yet when the page was loaded.

现在该事件将触发，即使在加载页面时还不存在#nomClient元素。

#2

Since you are adding the id nomClient dynamically and hence events will not be attached to it and directly calling change on it will not work.

由于您正在动态地添加id nomClient，因此事件不会附加到它，因此直接调用它的更改将不起作用。

So, instead of this:

因此,而不是这样的:

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

Try this:

试试这个:

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

#1