时间戳

首页 > 解决方案 > 根据另一个cfselect过滤cfselect中的数据

javascript - 根据另一个cfselect过滤cfselect中的数据

问题描述

在我正在处理的 ColdFusion 应用程序中，用户将看到两个 cfselect，一个带有区域列表，一个带有中心列表。每个地区都有自己的一套中心。当用户单击第一个 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>

标签： javascriptcoldfusion

解决方案

（评论太长了）

好吧，它实际上有 2 个部分：服务器端代码 (CF) 和客户端 (Javascript/Ajax)。一个完整的例子对于单个 SO 线程来说有点长。如果是我，我会首先专注于编写 CF 代码。获取<cfcomponent>以返回您想要的数据 - 以您想要的格式。在它启动并工作之后，转到客户端代码。

就 ColdFusion 代码而言，您当前的 CFC 看起来不错。我唯一要改变的是让函数返回一个结构数组而不是“查询”对象。CF 在序列化查询对象时默认为一种不稳定的格式。更好地建立自己的结构 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

您可以创建一个类似的函数来返回与特定区域 ID 关联的中心。唯一的区别是它需要一个区域 ID 作为参数：

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

测试类似，您只需要提供一个区域 id 作为 url 参数：

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

推荐阅读