javascript - 使用ajax填充选择的复选框值

Question

我的表单包含带有用户 Angular 色的复选框和带有用户的选择框。我需要一个选择框，以便在单击时根据复选框值重新填充。复选框允许选择“全部”(在这种情况下，选择选项不需要更改)或“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>