Ausgewählte Kontrollkästchenwert verwendet AJAX zum erneuten Befüllen Wählen Sie

Question

Mein Formular verfügt über Kontrollkästchen mit Benutzerrollen und ein Auswahlfeld mit Benutzern. Ich brauche ein Auswahlfeld, um basierend auf den Kontrollkästchenwerten beim Klicken neu zu befüllen. Die Kontrollkästchen erlauben die Auswahl von entweder "alle" (in diesem Fall müssen die Auswahloptionen nicht geändert werden) ODER einer beliebigen Kombination von "cm", "adv", "cd" -Werten. Sobald auf die Kontrollkästchen geklickt wird, sollte das Auswahlfeld dynamisch neu gefüllt werden (alles bevor das Formular gesendet wird).

Ich möchte nicht die gesamte Seite jedes Mal neu laden, wenn ein Benutzer Textboxauswahl (en) ändert. Ich war nicht in der Lage, eine geeignete Lösung zu finden und bin in einer intensiven Zeitkrise. Ich bin jQuery kenntnisreich, aber nicht Ajax. Was ich gefunden habe, lässt mich denken, dass Ajax wirklich der Weg wäre, hierher zu kommen, aber würde mich freuen, wenn möglich, Jquery zu verwenden. Ich würde sehr gerne Hilfe mit einem Beispiel dafür, wie dies zu erreichen ist, verwenden Code hier geliefert.

Answer 1

ändern Sie Ihre Hauptseite zu diesem.

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

machen eine separate Datei 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>