Comment puis-je modifier les options dans les listes déroulantes si elles sont générées dynamiquement?

Question

J'ai ce script pour générer trois listes déroulantes et un champ de saisie de texte pour mon formulaire web que je dois soumettre à une base de données en utilisant PHP. Ce formulaire est HTML mais seulement cette partie est javascript pour remplir les champs. J'utilise ce javascript pour générer environ 15 ensembles de ces listes déroulantes et champs de saisie de texte. (1 jeu = 3 listes déroulantes et 1 champ de texte de saisie).

Ma question est la suivante: Si l'utilisateur sélectionne une option dans la première liste déroulante, alors les options dans les deux autres listes déroulantes doivent changer en fonction de l'option sélectionnée dans le premier drodown. Ce que je voulais faire après avoir généré le nombre désiré d'ensembles en sélectionnant le numéro de la liste déroulante dans ce violon, il va générer des ensembles de 3 dropdowns et 1 champ d'entrée de façon dynamique. Par conséquent, si quelqu'un sélectionne l'option 1 dans la première liste déroulante, il doit également modifier les options dans les autres listes déroulantes.

JSFIDDLE

LE SCRIPT:

<script> 
$(function() { 
    $("input[type=button][value=Add]").click(function(e) { 
     for (i = 0; i < document.getElementById('sel').value; i++) { 
      e.preventDefault(); 
      var j = 1; 
      var newDiv = $("<div>").appendTo("#dropbox"); 
      $("<select>").attr("name", "input1_"+j).appendTo(newDiv).append(
      $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2")); 
      $("<select>").attr("name", "input2_"+j).appendTo(newDiv).append(
      $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2")); 
      $("<select>").attr("name", "input3_"+j).appendTo(newDiv).append(
      $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2")); 
      $("<input>").attr("name", "input4_"+j).appendTo(newDiv); 
      $("<button>").text("Remove").appendTo(newDiv).click(function(e) { 
       e.preventDefault(); 
       $(this).parent().remove(); 
      }) 
       j++; 
     } 
    }) 
}) 
</script> 

HTML:

<form> 
    <select id="sel"> 
     <option value="" selected="selected"></option> 
         <option value="01" >01</option> 
         <option value="02" >02</option> 
         <option value="03" >03</option> 
         <option value="04" >04</option> 
         <option value="05" >05</option> 
         <option value="06" >06</option> 
         <option value="07" >07</option> 
         <option value="08" >08</option> 
         <option value="09" >09</option> 
         <option value="10" >10</option> 
         <option value="11" >11</option> 
         <option value="12" >12</option> 
         <option value="13" >13</option> 
         <option value="14" >14</option> 
         <option value="15" >15</option> 
         </select> 
    <input type="button" value="Add" /> 

    <div id="dropbox"></div> 
</form> 

Answer 1

Puisque vous utilisez jQuery, je suggère d'ajouter un événement change à votre menu déroulant. (La page docs jQuery liée contient un exemple complet).

En ce qui concerne le remplissage des 2 autres menus déroulants, vous avez plusieurs options, telles que:

1. statique: Votre code PHP qui crée la page remplit un tableau javascript avec toutes les options possibles nécessaires selon l'utilisateur choix dans la 1ère liste déroulante. Ensuite, votre code javascript peut utiliser ce tableau chaque fois qu'un événement de changement est déclenché. Dynamique: Si les sous-choix ne peuvent pas être prédits ou chargés au chargement de la page, utilisez une requête jQuery ajax pour demander au serveur des options correspondant au choix de l'utilisateur. Vous pouvez également lire sur le format de données JSon (pris en charge par PHP en utilisant json_encode)

Answer 2

DEMO

J'ai donné le sel et le bouton d'un ID et changé l'accès dom jQuery

Je l'utilise aussi le « i » et « j » maintenant

En supposant que vous vouliez syncronise les 3 sélectionne, le code pourrait ressembler à ceci

$(function() { 
    $("input[type=button][value=Add]").click(function(e) { 
    e.preventDefault(); 
    for (var i=0,n=$('#sel').val();i<n; i++) { 
     var newDiv = $("<div>").appendTo("#dropbox"); 
     for (var j=0;j<3;j++) { 
     var id = "input"+i+"_"+j; 
     $("<select>") 
      .attr("id",id) 
      .attr("name",id) 
      .on("change",function() { 
      // set all other select's value to this value 
      $(this).siblings("select").val(this.value); 
      }) 
      .append(
      $("<option>").val("0").text("Option 1"), 
      $("<option>").val("1").text("Option 2")) 
      .appendTo(newDiv); 
     } // j 
     $("<input>") 
      .attr("name", "input"+i+"_"+j) 
      .appendTo(newDiv); 
     $("<button>").text("Remove").appendTo(newDiv).click(function(e) { 
     e.preventDefault(); 
     $(this).parent().remove(); 
     }) 
    } // i 
    }) 
})​