La valeur de la case à cocher sélectionnée utilise ajax pour repeupler la sélection

Question

Mon formulaire comporte des cases à cocher avec les rôles utilisateur et une zone de sélection avec les utilisateurs. J'ai besoin d'une boîte de sélection pour repeupler en fonction des valeurs de case à cocher quand on clique dessus. Les cases à cocher permettent la sélection de "tous" (dans ce cas, les options de sélection ne doivent pas changer) OU toute combinaison de valeurs "cm", "adv", "cd". Une fois la ou les case (s) cochée (s), la boîte de sélection devrait être repeuplée dynamiquement (tout ceci avant la soumission du formulaire). Je ne veux pas que l'intégralité de la page soit rechargée à chaque fois qu'un utilisateur change de sélection de zone de texte. Je n'ai pas été en mesure de trouver une solution appropriée, et je suis dans une période de temps intense. Je suis jquery bien informé, mais pas Ajax. Ce que j'ai pu trouver me permet de penser qu'Ajax serait vraiment le moyen d'aller ici, mais je serais ravi d'utiliser jquery si possible. J'apprécierais grandement l'aide avec un exemple de la façon d'accomplir ceci, en utilisant le code fourni ici.

Answer 1

changez votre page principale pour cela.

<form> 
    <input type="checkbox" name="assignedRole" id="checkedAll" value="all">All<BR> 
    <input type="checkbox" name="assignedRole" id="assignedRole" value="cm" class="checkSingle">Case managers<BR> 
    <input type="checkbox" name="assignedRole" id="assignedRole" value="adv" class="checkSingle">Advisors<BR> 
    <input type="checkbox" name="assignedRole" id="assignedRole" value="cd" class="checkSingle">Career developers 

    <select name="staff"></select> 
    <input type="submit"> 
</form> 

<script> 
    $(document).ready(function() { 
     $(".checkSingle").change(function(){ 
      $.getJSON("thecall.cfm?",{assignedRole: $(this).val(), ajax: 'true'}, function(j){ 
      var options = ''; 
      for (var i = 0; i < j.length; i++) { 
       options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; 
       } 
       $("select#staff").html(options).change(); 
      }); 
     }).change(); 
    }); 
</script> 

faire un fichier séparé appelé thecall.cfm

<cfset return_struct = StructNew() /> 
<cfquery datasource="datasourceName" name="qry_staff"> 
    SELECT userID, lastname + ', ' + firstname AS staffName 
    FROM userTable 
    WHERE role = '#form.assignedRole#' 
</cfquery> 


<cfset data = [] /> 

<cfoutput query="qry_staff"> 
    <cfset obj = {"optionValue" = userID, "optionDisplay" = staffName} /> 
    <cfset arrayappend(data, obj) /> 
</cfoutput> 
<cfoutput>#serializeJSON(data)# </cfoutput>