Javascript Girl
  1. Javascript Girl
  3. Comment puis-je modifier les options dans les menus déroulants si cela est généré dynamiquement?
Intereting Posts
Configurez dynamiquement le document.domaine sur iframe Exécutez le code JavaScript lors de la fermeture de la fenêtre ou de la mise à jour de la page? Django formset equivalent in angular.js Le titre du Google Maps Marker ne s'affiche plus comme une info-bulle sur le vol stationnaire JavaScript SUM et GROUP BY des données JSON Désactivation des liens dans Android WebView Javascript – dumping de toutes les variables globales Ng-include avec une variable pour src Boucles AngularJS et mise en forme Existe-t-il un indexOf en javascript pour rechercher un tableau avec une fonction de comparaison personnalisée Keylistener en Javascript Test du type d'un élément DOM en JavaScript Obtenez tous les attributs d'élément en utilisant le rapporteur Télécharger des fichiers avec node.js Comment faire de cette barre de navigation flottant en haut en faisant défiler?

Comment puis-je modifier les options dans les menus déroulants si cela est généré dynamiquement?

J'ai ce script pour générer trois menus déroulants 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 menus déroulants et champs de saisie de texte. (1 set = 3 menus déroulants et 1 champ de texte d'entrée).

Ma question est la suivante: si l'utilisateur sélectionne une option dans la première liste déroulante, les options dans les deux autres menus déroulants devraient changer selon l'option sélectionnée dans la première dégradation.

Ce que je voulais, c'est après avoir généré le nombre souhaité d'ensembles en sélectionnant le nombre dans la liste déroulante de ce violon, il générera les réglages des 3 menus déroulants et 1 champ de saisie de manière dynamique.

Donc, si quelqu'un sélectionne l'option 1 à partir de la première liste déroulante, il devrait également changer les options dans les autres menus déroulants.

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>

LE 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>

Comme vous utilisez jQuery, je suggère d'ajouter un événement de modification à votre liste déroulante. (La page jQuery docs 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 se remplit dans un javascript avec toutes les options possibles selon le choix de l'utilisateur 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é.

  2. Dynamique: si les sous-choix ne peuvent pas être prédits ou chargés à la charge de la page, utilisez une requête jquery ajax pour interroger le serveur pour les options correspondant au choix de l'utilisateur. Vous pouvez également lire le format de données JSon (pris en charge par PHP en utilisant json_encode )