Question

我的表单包含带有用户角色的复选框，以及一个包含用户的选择框。我需要一个选择框，根据单击时的复选框值重新填充。复选框允许选择“全部”（在这种情况下，选择选项不需要更改）或“cm”，“adv”，“cd”值的任意组合。单击复选框后，选择框应动态重新填充（所有这些都在表单提交之前）。

<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会很激动。我非常感谢有关如何使用此处提供的代码完成此操作的示例的帮助。

Answer 1

将您的主页更改为此。

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

选中的复选框值使用ajax重新填充选择

1 个答案: