Javascript 基于另一个cfselect筛选cfselect中的数据

在我正在开发的ColdFusion应用程序中，用户将看到两个cfselects，一个带有区域列表，另一个带有中心列表。每个地区都有自己的一套中心。当用户单击第一个cfselect中的某个区域时，应使用中心列表填充第二个区域

我的计划是在列表中有一个完整的中心列表，并在选择相应区域时使其可见。有没有一个简单的方法可以做到这一点？我对ColdFusion很陌生，所以我很努力。以下是我选择的两个CFC的代码：

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

从区域中选择不同的区域\u ID

（评论太长）

实际上，它有两个部分：服务器端代码（CF）和客户端代码（Javascript/Ajax）。完整的示例对于单个S.O.线程来说有点长。如果是我，我会首先专注于编写CF代码。获取

以返回所需的数据-格式为所需。在它启动并工作之后，转到客户端代码

就ColdFusion代码而言，您当前的CFC看起来不错。我唯一要改变的是让函数返回一个结构数组，而不是一个“查询”对象。在序列化查询对象时，CF默认为不可靠的格式。最好建立自己的结构

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

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

---

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

更新我注意到“绑定：cfc…”被删除。如果确实要使用

cf，请选择
。。您认为需要将“bind”与CFC组件结合使用是正确的。也就是说。。。现在的一般建议是，因为它们的基础LIB已经过时，很难定制。最终，该标记只是其他javascript库的包装器，因此也可以使用jQuery进行DIY。1） 你能发布你的CFC代码吗？2） 你熟悉JavaScript吗？是的，我在尝试其他人在线发布的一些解决方案时设置了bind属性，但我删除了它，因为我想在开始解决这个问题之前发布代码。我的CFC代码几乎不存在，我开始写一个，同时跟随别人的解决方案，但我没走多远。不过我会把它添加到我原来的帖子里。我对JavaScript非常熟悉，虽然我不是一个大师，但我的知识足够丰富，可以用谷歌搜索我需要知道的东西。我赞同一种观点，即使用JavaScript cfform和UI元素中烘焙的ColdFusion通常是个坏主意。您描述的问题可以在几分钟内用jquery轻松实现，就像ColdFusion使用其UI标记和注入的javascript混淆的大多数事物一样。一旦你完全控制了你的JS和UI元素，使用ColdFusion UI元素的可能性就非常小了，尤其是当你需要自定义它们的时候。顺便说一句，虽然示例使用了cfquery，但没有理由不能使用cfstoredproc。非常感谢您的帮助，这种测试函数的方法将对我非常有帮助。我成功地从数据库中检索了区域，但对于按区域获取中心，它告诉我cfloop存在属性标记验证错误（local.getData无效）。尽管如此，我还是意识到我在cfquery中有数组声明和cfloop。再次感谢！很高兴它有帮助！我不知道您是否是CF新手，但既然您熟悉JS——如果您更喜欢脚本语法而不是标记（cfml），请看一看。这个例子只使用了标签，因为这是OP中的内容。我一定要看看，我对CF非常陌生，我不是标签的超级粉丝。我试图将我的第一个cfselect绑定到getRegions，但是ColdFusion告诉我“在CFC函数/queryoptions上找不到getRegions”。它似乎在查找定义了getRegions的CFC，但找不到函数，您知道哪里可能出错吗？
<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>