jQuery Girl
  1. jQuery Girl
  3. Des listes déroulantes dépendantes de JQuery peuplent comment
Intereting Posts
Le bouton désactivé écoute toujours l’événement de clic jQuery .load () ne fonctionne pas dans IE10 Comment enregistrer l’environnement css actuel? Couleur de fond et couleur de texte prédéfinies aléatoires sur 2 divs Comment créer l’effet “glisser-déposer” de ce site? Initialisation de Visual Composer lors du chargement de contenu Ajax jQuery On Change Event Not Firing Effectuer un zoom arrière sur le contenu d’une div et non sur la DIV elle-même. Comment faire charger quelque chose avant un autre en javascript et jquery Faire AJAX Post dans des rails sans passer à l’authenticity_token Comment incorporer ou recréer un graphique Google Analytics dans un CMS personnalisé Les appels jQuery AJAX vers la firebase database fonctionnent, mais pas dans l’ordre. suggère automatiquement ajax pour php Problème dans footable lors de l’ajout de données dynamics Pourquoi les gens ajoutent-ils leurs propres fonctions personnalisées / utilisateur à l’object jQuery?

Des listes déroulantes dépendantes de JQuery peuplent comment

J’ai des listes déroulantes dépendantes, comme indiqué dans le scénario ci-dessous. Quelqu’un pourrait-il s’il vous plaît suggérer comment atteindre le résultat en utilisant JQuery / Javascript?

Scénario: 

HH1:     ......   HH2:     ......

Edit: Désolé, j’ai oublié de mentionner que les options sont renseignées via javascript (pour la boucle). J’ai juste besoin de savoir comment rendre HH2 dynamic en fonction de la valeur sélectionnée HH1.

Si l’utilisateur sélectionne 3 dans l’option HH1 (heure), je souhaite afficher uniquement 3-0 (où 0 correspond à 24 heures), sélectionnez les options dans HH2. Je ne veux pas voir 1-2.

Fondamentalement, HH2 dépend de la valeur sélectionnée dans HH1 – est-ce possible en JavaScript? Pourriez-vous s’il vous plaît me montrer comment, si possible? 

 var drop2 = $("select[name=drop2] option"); // the collection of initial options $("select[name=drop1]").change(function(){ var drop1selected = parseInt(this.value); //get drop1 's selected value $("select[name=drop2]") .html(drop2) //reset dropdown list .find('option').filter(function(){ return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value }).remove(); // remove });

http://jsfiddle.net/HTEkw/

La réponse courte est oui, c’est possible en JavaScript / Jquery.

Vous pourriez le faire comme ceci en définissant vos dépendances dans un nouvel atsortingbut HTML5 data- * 🙂

HTML comme ceci: 

 HH1:  HH2:

Et Javascript (JQuery) comme ceci: 

 $('select[name="drop1"]').change(function () { var ar = $('select[name="drop1"] option:selected').attr('data-shown').split(','); $('select[name="drop2"] option').each(function(){ $(this).toggle(false); for(var i = 0; i <= ar.length; i++){ if($(this).attr('value') == ar[i]){ $(this).toggle(true); } } });}).trigger('change');

Cela devrait faire ce que vous voulez faire sur vos menus déroulants.

Avec la condition que vous avez mise dans le commentaire, c'est un peu plus facile: 

 $('select[name="drop1"]').change(function () { var number = parseInt($('option:selected', this).attr('value')); $('select[name="drop2"] option').each(function(){ $(this).toggle(parseInt($(this).attr('value')) >= number); }); }).sortinggger('change');

/ Ceci est un code JavaScript / 

 function fndroplist(listindex) { $("#ddlCity").options.length(""); switch (listindex) { case "Karnataka": $("#ddlCity").options[0] = new Option("--select--", ""); $("#ddlCity").options[1] = new Option("Dharawad", "Dharawad"); $("#ddlCity").options[2] = new Option("Haveri", "Haveri"); $("#ddlCity").options[3] = new Option("Belgum", "Belgum"); $("#ddlCity").options[4] = new Option("Bijapur", "Bijapur"); break; case "Tamilnadu": $("#ddlCity").options[0] = new Option("--select--", ""); $("#ddlCity").options[1] = new Option("Chennai", "Chennai"); $("#ddlCity").options[2] = new Option("Vijayada", "Vijayada"); break; } }   
 
   *