javascript - ajax选择基于另一个选择

我有一个第一选择，它工作正常，显示两个字段，另一个与用户选择的内容有关。

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

然后，必须显示其他4个字段，但是此步骤不起作用..我的字段不显示..

它不在我的第二个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());
        }
    });
});
});

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

最佳答案

您可能需要事件委托：这些事件未绑定到您的第二选择项，因为在绑定时（在页面加载时）尚不存在。

您可以通过更改此方法来做到这一点：

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

对于这样的事情：

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

现在，即使在页面加载时#nomClient元素尚不存在，此事件也会触发。