1

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

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

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

    <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"]
        });
4

2 回答 2

1

Try that using cfcomponent and cfselect tag.

The below link may be useful.

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

于 2013-08-12T09:15:31.437 回答
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()

       });

冷融合

<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>
于 2013-05-22T20:29:09.467 回答