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

“我的表单”具有带有用户角色的复选框，以及带有用户的选择框。我需要一个选择框来根据单击时的复选框值重新填充。复选框允许选择所有选项（在这种情况下，选择选项无需更改）或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会让我很兴奋。我非常感谢您使用这里提供的代码提供一个如何实现这一点的示例

将主页更改为此

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

制作一个名为call.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>

---

将主页更改为此

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

制作一个名为call.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>

---

您的google搜索字符串是，coldfusion jquery ajax示例。如果您早一点想到这一点，您可能会在比键入问题所需的时间更短的时间内找到一个合适的解决方案。我找到了一个在assignedRole只传入一个值时有效的解决方案。我还没有找到一个适合我所寻找的搜索字符串。如果您早一点想到这一点，您可能会在比键入问题所需的时间更短的时间内找到一个合适的解决方案。我找到了一个在assignedRole只传入一个值时有效的解决方案。我还没有找到一个适合我所寻找的。如果调用.cfm是由ajax调用的，form.assignedRole不是未定义的吗？正确，加载时出现主页错误，消息是form.assignedRole是未定义的。是的，很抱歉，您是对的，应该是url.assignedRole如果调用.cfm是由ajax调用的，form.assignedRole'是否未定义？正确，加载时出现主页错误，并显示一条消息，表明form.assignedRole在form中未定义。是的，很抱歉，您是对的，应该是url.assignedRole