jQuery Girl
  1. jQuery Girl
  3. Sélecteur JQuery pour obtenir toutes les valeurs de liste déroulante, problèmes pour 2 listes déroulantes
Intereting Posts
Comportement étrange lors du positionnement absolu d’éléments flottants agrandir et animer une plus grande section vers le haut en stationnaire Activer et désactiver Slick Slider sur certains points d’arrêt Graphique à secteurs HighCharts – Ajoutez du texte à l’intérieur de chaque tranche Uploadify: les opérations sont terminées, mais aucun téléchargement n’est effectué. La validation JQuery ne fonctionne pas lorsqu’elle est soumise par un bouton situé en dehors d’IFrame Objet fixé en dessous d’un certain point JQuery Valider la soumission du plugin quand il ne devrait pas Comment puis-je ré-écrire ce code sans jQuery? Supprimer les espaces blancs dans la zone de texte lors de la copie collée avec jQuery jQuery est inclus deux fois dans l’application Rails sur Heroku Comment déballer tous les parents avec jQuery? Lier l’événement de clic au bouton “Rechercher” dans la recherche personnalisée Google Comment initialiser un object jQuery une fois la mise en page rendue? Bootstrap multiselect ne fonctionne pas lorsque je lie les données de la réponse dans Angularjs

Sélecteur JQuery pour obtenir toutes les valeurs de liste déroulante, problèmes pour 2 listes déroulantes

Tableau HTML

Rangée 1: Col 1 [ Country DropDown ] | Col n ° 2 [ StateDropDown ]

Rangée 2: Col 1 [ Country DropDown ] | Col 2 [ StateDropDown ]

table a 2 dropdownlists , pour Country et State – cela fonctionne dans une liste déroulante, mais sa désactivation des listes déroulantes autres / États aussi!

Le problème est que, alors que les États-Unis et l’Australie ont du texte diff states selected , mais en col2 avec le même ID / valeur d’ State sélectionné 3 (si je sélectionne Californie, Perth est également désactivé!), Mon code les désactivant en tant que doublons car il compare le valeur sélectionnée et non texte) pour, par exemple, cette sélection désactive Perth .. 

 [USA] -> [California] (value = 3) [Australia] -> [Perth] (*also* has value= 3) so its disabled

Comment faire cela comme une unique combination de pays et d’état dans chaque rangée? ou simplement comparer les textes des listes déroulantes? …

  1. C’est-à-dire Option1, comment vérifier si les deux Country ID + State ID Value already exist ?
  2. Option2, il suffit de comparer les textes sélectionnés (on se sent à moitié cuit)

JS Fiddle 

 // Javascript Does not disable States previously selected $("#CountryTable").on('change', '.State', function() { var dropDownText = $('#CountryTable .State select').not(this).map(function() { return this.SelectedText; // does not work this.val() works but useless }).get(); var selectedValue = $(this).val(); var otherDropdowns = $('.State').not(this);

otherDropdowns.find (‘option [valeur =’ + selectedValue + ‘]’). prop (‘disabled’, true); }); 

 
  *** Image pour montrer quelque chose de similaire … pas précis 
 Échantillon à afficher - éviter les combinaisons en double des drowpdowns en cascade 


    


	

		      	
  Ce n’est pas une solution parfaite que vous pouvez simplement copier / coller, mais cela se rapproche vraiment de ce que vous voulez. 


  Je l’ai fait comme une fonction entière avec 4 arguments: 


    

  1.   La vraie table , de préférence un id 
    2. 

  2.   Le td , de préférence une class 
    3. 

  3.   La table cachée à cloner, de préférence un id 
    4. 

  4.   Le nouveau button rangée, de préférence un id 
    5. 



  En vous laissant libre de nommer vos éléments comme vous le souhaitez dans le code HTML sans vous soucier de réparer les MULTIPLES emplacements où ces quatre éléments sont utilisés dans le script. 


  Maintenant … C’est juste un bon début. 
  En fait, lorsque l’utilisateur passe de “Pays A” à “Pays B”, la liste déroulante des états devrait être différente! 


  C’est le seul problème que j’ai laissé… Puisque je ne sais pas comment vous voulez charger ces options. 


  Cela m’a pris beaucoup de temps … je l’ai fait parce que je ne pouvais pas croire qu’une demande aussi “simple” puisse être aussi complexe … j’ai dû l’écraser 
  ;). 


  Voici donc le code (JS uniquement) et une démonstration de CodePen qui fonctionne. 


 var excusiveSelect = function(tableID,rowCLASS,dummyID,cloneBtn){ // Preferably ID, CLASS, ID, ID console.clear(); // Cloning function var cloneRow = function(){ var newrow = $(dummyID).find(rowCLASS).clone(); $(tableID).append(newrow); refresh_mapping(); }; // Generate new lines $(cloneBtn).on("click",cloneRow); // ================================================================================ INITIALISATION // Selection mapping var row_count; var row_map = {}; // Get select clas names per colums var col_count = $(rowCLASS).first().find("td").length; var col_classes = []; for(i=0;i 





 	


  
   Country A Country B Country C     State 1 State 2 State 3 State 4 State 5   
  
   Country A Country B Country C     State 1 State 2 State 3 State 4 State 5