静态下拉到动态下拉Coldfusion

时间:2014-04-12 20:12:17

标签: html sql coldfusion dropdownbox

我是堆栈溢出的新手。 我需要创建静态下拉列表,然后根据静态下拉列表中选择的值创建动态下拉列表。只是coldfusion和html。没有其他花哨的东西。 因此,从第一次下拉,用户将选择:颜色,身份证,军官,学校和点击"继续"按钮

然后在同一页面或不同页面上,如果选择颜色,它将对数据库进行查询并给出不同颜色的结果,如果id被选中,它将给出查询中的id号列表。如果选择了这些变量,那么官员或学校也是如此。

我可以执行下拉框,并获取查询但我仍然坚持将查询结果从frist下拉框中获取。以下是我的代码:

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

1 个答案:

答案 0 :(得分:2)

除非您在每次选择后重新提交页面并重新查询相关的下拉列表值,否则您必须使用某种客户端js和/或ajax。

我认为这就是你试图表明你在做什么?你要做什么并不太清楚;您是否希望依赖下拉列表反映您选择的内容并自动更改?

因此,根据他们挑选和提交的内容,你需要在所有可能的下降中包含大量内容吗?为什么用户一次只能选择其中一种?这似乎是一种非常麻烦的编码方式,也是一个繁琐的界面。

这将向您展示如何使用cfselect进行连线,但我认为您想要这样做仍然有点奇怪。你打算把每件作品存起来展示或者在某个地方使用吗?或者这仅仅是一个概念证明?

我可能会一直显示所有的东西。依赖性下拉对于汽车选择器(年份,品牌,模型,修剪级别)等更有意义,其中每个选项都独特地依赖于先前的值。我不确定你要问的问题是什么。

无论如何,ColdFusion确实有一个<cfselect>,它会自动为你提供连接,但我个人只会使用jQuery / Ajax。

以下是使用标记执行此操作的方法: 1)不要在改变时提交表格。 2)使用cfselect将下拉线连接在一起。 3)您需要有方法来调用远程可访问的查询才能使绑定生效。

<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,它将返回一个手工构建的查询(我不知道你在何处/在哪里存储数据,所以你可以根据需要换出真正的查询,只需返回一个查询请求:< / p>

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和column name。

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

只需确保将绑定中调用的方法名称与每种方法使用的方法名称相匹配。