Фильтрация данных в cfselect на основе другого cfselect

Question

В приложении ColdFusion, над которым я работаю, пользователь увидит два cfselects, один со списком регионов и один со списком центров.Каждый регион имеет свой набор центров.Когда пользователь щелкает область в первом cfselect, он должен заполнить второй список центрами.

Мой план состоит в том, чтобы иметь полный список центров в списке и сделать их видимыми, когда выбран соответствующий регион.Есть простой способ сделать это?Я очень новичок в ColdFusion, поэтому я изо всех сил.Вот код для двух имеющихся у меня cfselects:

<td>
        <cfset SelectionListWidthAndHeight =  "width:375px; height:" & min(130, ((REGIONS.RecordCount-1) * 13)) & "px;">
        <cfselect           name            = "Select_Region_ID"
                            query           = "REGIONS"
                            queryposition   = "below"
                            value           = "REGION_ID"
                            display         = "Region"
                            selected        = "0" 
                            size            = "10"
                            style           = #SelectionListWidthAndHeight#
                            required        = "yes"
                            message         = "You must specify a center."
                            onchange        =  "">
                            <option value="All">All regions and centers</option>



        </cfselect>                 
    </td>

<td>
        <cfset SelectionListWidthAndHeight =  "width:375px; height:" & min(130, ((CENTERS.RecordCount-1) * 13)) & "px;">
        <cfselect           name            = "Select_Center_ID"
                            query           = "CENTERS"
                            queryposition   = "below"
                            value           = "CENTER_ID"
                            display         = "Center"
                            selected        = "0" 
                            size            = "10"
                            style           = #SelectionListWidthAndHeight#
                            required        = "yes"
                            message         = "You must specify a center."

                            >
                            <option value="All">All centers in region</option>

        </cfselect>
    </td>

Список регионов и центров получен с помощью cfstoredprocs:

<cfstoredproc procedure="spGetAllRegions" datasource="APD">
    <cfprocresult name="REGIONS" resultset="1">
</cfstoredproc>

<cfstoredproc procedure="spGetAllCenters" datasource="APD">
    <cfprocresult name="CENTERS" resultset="1">
</cfstoredproc>

Код CFC:

<cfcomponent output="false">
<cfset variables.dsn = "APD">

<cffunction name="getregions" access="remote" returntype="query">
    <cfset var getData = "">

    <cfquery name="getData" datasource="#variables.dsn#"> 
        SELECT DISTINCT REGION_ID FROM Regions
    </cfquery>

    <cfreturn getData />
</cffunction>

Answer 1

(слишком долго для комментариев)

Что ж, на самом деле есть две части: код на стороне сервера (CF) и на стороне клиента (Javascript / Ajax).Полный пример немного длинен для одного потока SO.Если бы это был я, я бы сосредоточился на первом написании кода CF.Получите <cfcomponent> для возврата нужных вам данных в нужном формате.После того, как все заработало, перейдите к клиентскому коду.

Что касается кода ColdFusion, ваш текущий CFC выглядит хорошо.Единственное, что я бы изменил, - это чтобы функции возвращали массив структур вместо объекта «запрос».CF по умолчанию используется в формате Wankky при сериализации объектов запроса.Лучше создавать свои собственные структуры IMO.

<cffunction name="getRegions" access="remote" returntype="array">

    <cfquery name="local.getData" datasource="#variables.dsn#"> 
        SELECT Region_Id, Region
        FROM   Regions
        ORDER BY Region
    </cfquery>

    <!--- convert each record into structure and append to array --->
    <cfset local.results = []>
    <cfloop query="local.getData">
       <cfset arrayAppend(local.results, {"value": region_id, "label": region})>
    </cfloop>

    <cfreturn local.results />
</cffunction>

Чтобы увидеть, какие данные получит вызов ajax, загрузите их в браузере и протестируйте удаленную функцию:

http://localhost/YourComponent.cfc?method=getRegions&returnformat=json

Вы можете создать аналогичную функцию для возврата центров, связанных с конкретным идентификатором региона.Единственное отличие состоит в том, что в качестве аргумента требуется идентификатор региона:

<cffunction name="getCenters" access="remote" returntype="array">
    <cfargument name="region_id" type="numeric" required="true">

    <cfquery name="local.getData" datasource="#variables.dsn#"> 
        SELECT Center_Id, Center
        FROM   Centers
        WHERE  Region_Id = <cfqueryparam value="#arguments.region_id#" cfsqltype="cf_sql_integer">
        ORDER BY Center
    </cfquery>
    <!--- convert each record into structure and append to array --->
    <cfset local.results = []>
    <cfloop query="local.getData">
        <cfset arrayAppend(local.results, {"value": center_id, "label": center})>
    </cfloop>

    <cfreturn local.results>
</cffunction>   

Тестирование аналогично, вам просто нужно указать идентификатор региона в качестве параметра url:

http://localhost/YourComponent.cfc?method=getCenters&returnformat=json&region_id=123