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

问题描述

我是堆栈溢出的新手.我需要创建一个静态下拉列表，然后根据在静态下拉列表中选择的值创建一个动态下拉列表.只是coldfusion和html.没有其他花哨的东西.所以从第一个下拉菜单中，用户会选择:颜色、身份证、官员、学校，然后点击继续"按钮

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.

我可以执行下拉框并获取查询，但我无法从第一个下拉框获取查询的结果.以下是我的代码:

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?

而且我可能会一直显示所有的东西.从属下拉列表对于汽车选择器(年份、品牌、型号、装饰级别)等内容更有意义，其中每个选择器都唯一地依赖于前一个值.我不确定你想从你问的问题中找到什么.

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)不要提交你的表格onChange.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屋！