使用ColdFusion、jQuery和Ajax填充第二个下拉列表

我有一个下拉列表，有14个值。根据所选的值，它将查询SQL Server数据库并返回一些客户端以在第二个下拉列表中显示

我想让第二个下拉菜单使用jquerymultiselect小部件，其中每个值都有一个复选框可供选择

这是我上一次尝试做的，但它根本不起作用

    <form>
        <label for="lstTiers">Tier:</label>  
        <select name="lstTiers" id="lstTiers">    
            <option value="1">Tier 1</option>    
            <option value="2">Tier 2</option>    
            <option value="3">Tier 3</option>  
            <option value="4">Tier 4</option>  
            <option value="5">Tier 5</option>  
            <option value="6">Tier 6</option>  
            <option value="7">Tier 7</option>  
            <option value="8">Tier 8</option>  
            <option value="9">Tier 9</option>  
            <option value="10">Tier 10</option>  
            <option value="11">Tier 11</option>                                                                                                                  
            <option value="12">Tier 12</option>                                                                                                                  
            <option value="13">Tier 13</option>                                                                                                                  
            <option value="14">Tier 14</option>                                                                                                                                                                  
        </select>
        <label for="lstClients">Client:</label>  
        <select name="lstClients" id="lstClients">    
        </select>
        <input type="button" name="click_me" id="click_me" value="Click Me" />
    </form>

我还尝试了一些其他jQuery，在那里我循环并构建了选项

最后，这是我的cfc文件：

<cfcomponent output="false">
    <cffunction access="remote" name="returnSomething" returntype="query" returnformat="json">
        <cfargument name="Tier" type="string" required="yes">
        <cfquery name="qryGetClients" datasource="ProjectGrid_Test">
            SELECT Div, ClientName FROM tblClientUpgradeClients WHERE Tier = #arguments.Tier# ORDER BY Div
        </cfquery>
        <cfreturn qryGetClients>
    <cffunction>
</cfcomponent>

---

在本例中，我将尽最大努力使用您的编码语言

注意，我使用的是coldfusion 9.0.1和jquery 1.9+

jquery/javascript

           $('#lstTiers').on('change', function (){        
               $.ajax({
               url:'Ajax-test.cfm',
                       data: {'method': 'returnSomething',
                              'Tier': $(this).val(); },

               success: function(json){
                   if (json != '' )
                var vx='<option value="">All</option>';
                   $.each (json, function(k, v){

                       vx+='<option value="'+v.client_id+'">'+v.client_name+'</option>';            
                   });
                   $('#lstClients').html(vx);
                   }

               }); //end ajax()

       });

模型

---

尝试使用cfcomponent和cfselect标记

下面的链接可能有用

---

您需要将数据转换为选项的html字符串，而不是执行.htmldata。不过，我不太理解您的sql查询。。。你真的在数据库中存储数据吗？不，我没有存储数据。我真的在存储Div和ClientName。我在试验，想也许我的查询可以构建整个系统。我还刚刚查询了Div和Clientname，并尝试执行如下操作：for var I=0；i$('#lstClients).multiselect( { noneSelectedText:"All Selected", show: ["fade"], hide: ["fade"], selectedList: 1, multiple: true, uncheckAllText: ["Clear"] });

jquery/javascript

           $('#lstTiers').on('change', function (){        
               $.ajax({
               url:'Ajax-test.cfm',
                       data: {'method': 'returnSomething',
                              'Tier': $(this).val(); },

               success: function(json){
                   if (json != '' )
                var vx='<option value="">All</option>';
                   $.each (json, function(k, v){

                       vx+='<option value="'+v.client_id+'">'+v.client_name+'</option>';            
                   });
                   $('#lstClients').html(vx);
                   }

               }); //end ajax()

       });

<cffunction name="returnSomething" access="remote" output="false" returntype="json">
<cfargument name="Tier" type="string" required="yes">
    <cfset var qryGetClients= "">
        <cfquery name="qryGetClients" datasource="ProjectGrid_Test">
Select * from Clients WHERE Tier = #arguments.Tier# ORDER BY 1 
    </cfquery>
    <cfreturn qryGetClients>
</cffunction>

    <cffunction name="getRequestorsByEvent" access="remote" output="false" returntype="query">
        <cfargument name="nd_event_id" type="string" required="false">  
        <cfargument name="status" type="string" required="false">   
        <cfset var qRequestorsByEvent = "">
        <cfquery datasource="#application.DSN#" name="qRequestorsByEvent">
    select distinct d.init_contact_staff, initcap(e.pref_name_sort) name  from ben_activity_dtl d
    inner join entity e
    on e.id_number = d.init_contact_staff

    where d.nd_event_id =  <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.nd_event_id#">
    <cfif isDefined("arguments.status") and arguments.status neq "">
                                and d.request_status_code = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.status#"> 
                            </cfif>
    order by 2 asc    
        </cfquery>
        <cfreturn qRequestorsByEvent>
    </cffunction>

<cffunction name="RequestorsByEvent" output="false" hint="index">
    <cfset var rc=event.getcollection()>
    <cfset var returnArray = ArrayNew(1) />
    <cfset qRequestorsByEvent = getmodel("dynform").getRequestorsByEvent(rc.nd_event_id, Event.getValue("status", ''))> 
     <cfloop query="qRequestorsByEvent">
        <cfset RequestorsStruct = StructNew() />
        <cfset RequestorsStruct["init_contact_staff"] = init_contact_staff/>
        <cfset RequestorsStruct["name"] = name />

        <cfset ArrayAppend(returnArray,RequestorsStruct) />
    </cfloop>        

    <cfset event.renderData( type="json", data=returnArray ) />
</cffunction>