Vérifiez, avec jquery, si une option de liste déroulante spécifique est sélectionnée, et si c'est le cas, activez/affichez une zone de liste déroulante cachée/désactivée

Question

Je charge les données d'une table de base de données directement dans la liste déroulante d'un formulaire. J'essaie de vérifier le chargement de la page si une valeur spécifique est définie dans cette boîte et si c'est le cas, je veux activer une autre liste déroulante qui est désactivée et masquée par défaut. J'utilise Chronoforms v5 pour la création de formulaire (joomla) et j'ai des événements d'installation qui permettent & afficher la 2ème liste déroulante si une valeur spécifique est choisie dans la première liste déroulante, et inversement si aucune valeur n'est choisie dans la 1ère liste déroulante, ou une valeur différente de celle que je veux, je désactive & cacher la 2ème liste déroulante. Mais ces événements se produisent uniquement lorsque l'utilisateur modifie activement les valeurs dans la première liste déroulante. J'ai également besoin que les événements se produisent lors du chargement de la page.

le javascript de Chronoform est

function chronoforms_fields_events(){ 

    $(':input[name="custom"]').on('change', function(){ 
     if($(this).val() == 'United_States'){ 
      $(':input[name="state"]').prop('disabled', false); 
     } 
    }); 

    $(':input[name="custom"]').on('change', function(){ 
     if($(this).val() == 'United_States'){ 

      if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){ 
       $(':input[name="state"]').closest('.gcore-subinput-container').show(); 
       }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){ 
       $(':input[name="state"]').closest('.gcore-form-row').show(); 
      } 

     } 
    }); 

    $(':input[name="custom"]').on('change', function(){ 
     if($(this).val() != 'United_States'){ 

      if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){ 
       $(':input[name="state"]').closest('.gcore-subinput-container').hide(); 
       }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){ 
       $(':input[name="state"]').closest('.gcore-form-row').hide(); 
      } 

     } 
    }); 

    $(':input[name="custom"]').on('change', function(){ 
     if($(this).val() != 'United_States'){ 
      $(':input[name="state"]').prop('disabled', true); 
     } 
    }); 

    $(':input[name="custom"]').on('click', function(){ 
     if($(this).prop('checked')){ 
      $(':input[name="state"]').prop('disabled', false); 
     } 
    }); 
} 
chronoforms_fields_events(); 

Je suis actuellement l'ajout de ce javascript avant que le HTML (sous forme de rendu), mais il ne fonctionne pas

function validatecountry(){ 
if ($("#custom").prop("selectedIndex", 'United_States')){ 
      $(':input[name="state"]').prop('disabled', false); 
    if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){ 
        $(':input[name="state"]').closest('.gcore-subinput-container').show(); 
       }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){ 
       $(':input[name="state"]').closest('.gcore-form-row').show(); 
      } 

} 
} 
validatecountry(); 

Toute aide sera grandement appréciée

Answer 1

Si vous appelez cette fonction avant que le formulaire ne s'affiche, $("#custom"), $('input[name="state"]'), etc ne retournera rien & donc votre code ne fonctionnerait pas. Ajoutez l'appel en un événement prêt:

$(document).ready(function() { 
    validatecountry(); 
} 

Pour la première partie de votre question, vous pouvez déclencher manuellement un changement dans les champs d'entrée après DOM est prêt qui appeler la routine de changement:

$(document).ready(function() { 
    $('input[name="custom"]').trigger("change"); 
}