静态下拉到动态下拉Coldfusion [英] Static Dropdown to Dynamic Dropdown Coldfusion

问题描述

我是新的在这里堆栈溢出。
我需要创建一个静态下拉列表，然后根据静态下拉列表中选择的值创建一个动态下拉列表。只是coldfusion和html。没有其他花哨的东西。
所以从第一个下拉菜单中选择：color，id，officer，school并点击继续按钮

I am new here at stack overflow. I need to create a static dropdown and then create a dynamic drop down based on the values that was chosen in the static dropdown. Just coldfusion and html. NO other fancy stuff. So from the first drop down the user would chose: color, id, officer, school and hit "continue" button

然后在同一页或不同，如果选择颜色，它将对数据库执行查询，并给出不同颜色的结果，如果id被选中，它将给出查询中的id号列表。同样的事情，官员或学校，如果这些变量被选择。

Then on the same page or different, if color is chosen it will do a query on database and give out the results for the different colors, if id is seclected it will give a list of id numbers from a query. Same thing for officer or school, if those variables are chosen.

我可以做下拉框，并得到查询，但我不知道从frist下拉框的结果到查询。以下是我的代码：

I can do the dropdown box, and get the queries but I am stuck in getting the results from the frist dropdown box to the queries. Below is my code:

<cfform method="POST" action=""> 
<select name="dropDownOne" required="yes" onchange="this.form.submit()">
<option>Select Report Type</option>
<option value="color">Color</option>
<option value="id">ID</option>
<option value="officier">officier</option>
<option value="school">school</option>
</select>

<input type="Submit" name="Continue" value="Continue">
<cfif isDefined('form.selectType')><cfif form.dropDownOne eq "color">
   <option>Select Color</option>
     <cfloop query="colorlist">
   <option value="#color_id#" 
<cfif isDefined('form.selectcenter')>
<cfif form.selectcenter eq "#color_id#">selected</cfif></cfif>>#color#</option>
   </cfloop>

推荐答案

依赖的下拉值，你必须使用某种客户端js和/或ajax。

Unless you resubmit the page after each selection and requery for the dependent dropdown values, you have to use some kind of client side js and/or ajax.

我认为这是你想要证明你在做什么？你不是太清楚你想做什么;你想要从属下拉菜单反映你选择和自动改变吗？

I think that is what you are sort of trying to show you are doing? It is not too clear what you are trying to do; do you want the dependent dropdown to reflect what you choose and automagically change?

因此，根据他们选择和提交的内容，您需要有大的if包围所有可能的下拉列表。为什么用户只能一次选择这些东西之一？这似乎是一个非常繁琐的方式来编码，和一个繁琐的界面。

So you would need to have big if wraps around all the possible drop downs depending on what they picked and submitted? And why would the user only be able to choose one of these things at a time? This seems like a very cumbersome way to code it up, and a cumbersome interface.

这将告诉你如何使用 cfselect 连线，但我认为它还是有点奇怪想做到这一点。你要保存每一块，并显示或使用某处？或者这只是一个概念的证明？

This will show you how to wire up using cfselect, but I think it is still a bit strange how you want to do this. Are you going to save off each piece and show that or use that somewhere? Or is this just a proof of concept?

我可能会一直显示所有的东西。依赖下拉对于诸如Car选择器（Year，Make，Model，Trim level）之类的事物更有意义，其中每个唯一依赖于前一个值。

And I would probably display all the stuff all the time. A dependent drop down makes more sense for things like Car selectors (Year, Make, Model, Trim level) where each is uniquely dependent on the previous value. I am not sure what you are trying to hook together from the question you asked.

无论如何，ColdFusion确实有一个< cfselect> 这将为你自动连接，虽然我个人只是使​​用jQuery / Ajax。

Anyway, ColdFusion does have a <cfselect> which will wire that up for you automagically, though personally I would just use jQuery/Ajax.

以下是使用标记执行此操作的方法：
1）不要在yourChange上提交表单。
2）使用cfselect将下拉列表连接在一起。
3）您需要有方法来调用远程访问的绑定工作的查询。

Here is how you might do this using the tag: 1) Don't submit your form onChange. 2) Use cfselect to wire the dropdowns together. 3) You need to have methods to call queries that are remote accessible for the binding to work.

<cfif isDefined('Form.DropDownOne')>
    <!--- Do some action here --->
    <cfdump var="#form#">
</cfif>


<cfform>
    <label>Select A Report</label>
    <cfselect name="dropDownOne" id="dropDownOne" required="yes"
        <!--- The display attribute will map the "name" column to the option display text area --->
        <!--- The value attribute will map "value" column to the option value (what is submitted)--->
        display='name ' value='value'
        <!--- The cfc should send back a query with name and value columns. --->
        <!--- The dot path should point to the location of the cfc. --->
        bind="cfc:com.app.code.myDropDowns.getCategories()" bindonload="true">
      <option>Select Report Type</option>
    </cfselect>
    <label>Select A Value</label>
    <cfselect name="dropDownTwo" id="dropDownTwo" required="yes"
        display='name' value='value'
        <!---  This method takes the value from the other drop down. --->
        <!--- CF uses {} to denote the binding of the element to pass through. --->
        <!--- This binding will occur automatically on any change to the dropDownOne element (including load). --->
        bind="cfc:com.app.code.myDropDowns.getDetails({dropDownOne})" >
      <option>Stuff</option>
    </cfselect>
    <input type="Submit" name="Continue" value="Continue">
</cfform>

这里我创建了一个myDropDowns.cfc，它将返回一个手工构建的查询/你在存储数据，所以换成真正的查询，你喜欢，只是返回一个查询请求：

Here I made a myDropDowns.cfc that will return a hand-built query (I do not know how/where you are storing data, so swap out with real query as you like, just return a query to the request:

component output="false" persistent="false" displayname="myDropDowns" {

    structAppend(variables, Application.Seq.Objects.oCore.injectCoreMethods() );

    remote function getCategories() {
        var q = queryNew('');
        queryAddColumn(q,'name',['Select Report Type','Color','ID', 'Officer', 'School']);
        queryAddColumn(q,'value',['Select Report Type','Colors','IDs', 'Officers', 'Schools']);
        return q;
    }

    remote function getDetails(required string Category) {
        var q = queryNew('');
        if(Arguments.Category == 'Colors' ) {
            queryAddColumn(q,'name',['Select Value','Red','Green','Blue', 'Yellow', 'Purple']);
            queryAddColumn(q,'value',['','Red','Green','Blue', 'Yellow', 'Purple']);
        } else if(Arguments.Category == 'IDs' ) {
            queryAddColumn(q,'name',['Select Value','123','456','789', '1011', '978']);
            queryAddColumn(q,'value',['','123','456','789', '1011', '978']);
        } else if(Arguments.Category == 'Officers' ) {
            queryAddColumn(q,'name',['Select Value','Johnson','Fredricks','Oppenheimer', 'Davis', 'Smith']);
            queryAddColumn(q,'value',['','Johnson','Fredricks','Oppenheimer', 'Davis', 'Smith']);
        } else if(Arguments.Category == 'Schools' ) {
            queryAddColumn(q,'name',['Select Value','Central','Northridge','Fairview', 'Daring', 'South']);
            queryAddColumn(q,'value',['','CJH','NRJH','FHS', 'DHS', 'SHS']);
        } else {
            queryAddColumn(q,'name',['Select A Report Type First']);
            queryAddColumn(q,'value',['Yeah, do that']);
        }
        return q;
    }

}

在cat / list方法中，您可以修改以指向您的表，应返回与手动编码的样式相同的样式查询。替换你的database.tablename和列名，当然。

Here are a couple of queries wrapped in cat/list methods you could modify to point at your tables that should return the same style query as the hand coded ones. Substitute your database.tablename and column names, of course.

    remote function getCats() {
        var q = queryNew(''); // Create empty query, not really nec. Just to initiate as query type.
        var oQ = new Query(); // Create query object to execute query against your DB
        try { // I like to use try-catches, make it easier to figure out what is going on sometimes....
            /* You don't have to set the datasource if you set it in the Application for CF9+*/
            oQ.setDataSource('myDataSource');
            // Query name is only really needed if caching or requerying as it becomes part of your cache signature
            oQ.setName('qMyQueryCategories');
            oQ.setCachedWithin(1); // 1 == 1 day/24 hours, .5 =  12 hours, etc)
            oQ.setSQL("
                SELECT
                    T1.Id,
                    T1.DisplayName AS Name,
                    T1.Category AS Value
                FROM yourDB.yourCatTableHere T1
            ");
            q = oQ.Execute().getResult(); 
            return q;
        } catch (any err) {
            /*
            * Returning the error will allow you to debug in the case you have a bad query.
            * You can see the result in your F12 debug network tool.
            * You could optionally call an error handler to log/email the error
            * but then return the empty query to the UI request so it sort of keeps functioning...
            * */
            return err;
        }
    }

    remote function getList(required string Category) {
        var q = queryNew('');
        var oQ = new Query();
        try {
            oQ.setName('qMyQuery#Arguments.Category#');
            oQ.setCachedWithin(.04); // Approximately 1 hour (1/24=.0417)
            oQ.setSQL("
                SELECT
                    T1.Id,
                    T1.Category AS Cat,
                    T1.DisplayName AS Name,
                    T1.ValueKey AS Value
                FROM [yourDB.yourDetailTableNameHere] T1
                WHERE T1.Category = ? ;
            ");
            // Parameterize your sql variable. CF will take care of quoting it properly, etc.
            oQ.AddParam(value=Arguments.Category, cfsqltype='CF_SQL_VARCHAR' );
            q = oQ.Execute().getResult();
            return q;
        } catch (any err) {
            return err;
        }
    }

只要确保匹配您调用的方法名称您的绑定到您用于每个方法的绑定。

Just make sure you match the method names you call in your bindings to the ones you use for each method.

这篇关于静态下拉到动态下拉Coldfusion的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！