選中的複選框值使用ajax重新填充選擇

我的表單包含用戶角色的複選框和包含用戶的選擇框。點擊時，我需要一個基於複選框值重新填充的選擇框。複選框允許選擇「全部」（在這種情況下選擇選項不需要改變）或「cm」，「adv」，「cd」值的任意組合。一旦複選框被點擊，選擇框應該動態重新填充（所有這些在表單被提交之前）。選中的複選框值使用ajax重新填充選擇

<cfquery datasource="datasourceName" name="qry_staff"> 
    SELECT userID, lastname + ', ' + firstname AS staffName 
    FROM userTable 
    WHERE role IN('cm','adv','cd') 
</cfquery> 

<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> 
    <cfloop query="qry_staff" multiple="multiple"> 
     <cfoutput> 
     <option value="#qry_staff.userID#">#qry_staff.staffName#</option> 
     </cfoutput> 
    </cfloop> 
    </select> 
    <input type="submit"> 
</form>

我不希望每次用戶更改文本框選擇時重新加載整個頁面。我一直無法找到合適的解決方案，並且處於激烈的時間緊縮之中。我jquery知識淵博，但不是Ajax。我能找到的東西讓我認爲Ajax真的是這裏的方式，但如果可能的話，會很高興使用jquery。我非常感謝用這裏提供的代碼來完成這個示例的幫助。

來源

2017-10-19 Brig

你的谷歌搜索字符串是一個單獨的文件，'ColdFusion的jQuery的AJAX example'。如果您早些時候想到這一點，您可能會用比輸入問題更少的時間找到合適的解決方案。 –

如果assignRole只傳遞一個值，我發現了一個解決方案。我還沒有找到適合我所需要的東西。 – Brig

將您的主頁更改爲此。

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

創建一個名爲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>

來源

2017-10-19 18:43:39 Rob

如果CALL.cfm將被ajax調用，那麼'＃form.assignedRole＃'是不是未定義的？ –

正確，負載上的主要頁面錯誤，並帶有＃form.assignedRole＃在FORM中未定義的消息。 – Brig

是的，對不起，你是對的，應該是＃url.assignedRole＃ – Rob

選中的複選框值使用ajax重新填充選擇

回答

相關問題