Question

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

我希望第二个下拉列表使用jQuery Multiselect Widget，其中每个值都有一个复选框可供选择。

这是我上次尝试做的事情，但它不起作用。

    <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的一次尝试：

        $('#click_me').click(function() { alert('here');
            $.ajax({
                url: 'Ajax-test.cfc?method=returnSomething',
                data: {
                    Tier: $('#lstTiers').val()
                },
                cache: false,
                dataType: 'json',
                success: function(data) { 
                    $('#lstClients').html(data);                        
                },

                // This fires when an error with ColdFusion occurs
                error: function() {

                    alert('An error has occured!');

                }

            });

        }); // End click()

我还尝试了一些其他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>

如果可能，返回的下拉列表应允许用户使用复选框进行多选。我玩过jQuery Multiselect小部件，我已经有了它，但不是这个动态查询。

$('#lstClients).multiselect(
        {   noneSelectedText:"All Selected",
            show: ["fade"], 
            hide: ["fade"], 
            selectedList: 1, 
            multiple: true,
            uncheckAllText: ["Clear"]
        });

Answer 1

在这个例子中，我会尽力使用你编码的白话

注意我正在使用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()

       });

ColdFusion的

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

事实上，你需要看看json格式给你的返回类型，如果是coldfusion json，你会将每次迭代的jquery更改为$.each (json.DATA, function(k, v){

我以MVC的方式做事，并且像我的json一样是标准的非CF输出，所以这是我的代码示例

控制器

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

Answer 2

尝试使用cfcomponent和cfselect标记。

以下链接可能有用。

http://forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-2-Related-Selects

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

2 个答案: