html-从静态下拉列表到动态下拉列表Coldfusion

我是堆栈溢出的新手.
我需要创建一个静态下拉列表,然后根据在静态下拉列表中选择的值创建一个动态下拉列表.只是Coldfusion和html.没有其他花哨的东西.
因此,从第一个下拉菜单中,用户将选择:颜色,ID,官员,学校,然后点击“继续”按钮

然后在同一页面或不同页面上,如果选择了颜色,它将在数据库中进行查询并给出不同颜色的结果,如果选择了id,则将给出查询的ID编号列表.如果选择了这些变量,则对于官员或学校来说也是一样.

我可以执行下拉框,并获取查询,但是我仍然无法将结果从第一下拉框转到查询中.下面是我的代码:

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

我认为这就是您试图证明自己在做什么?目前尚不清楚您要做什么.您是否希望从属下拉列表反映您选择的内容并自动更改?

因此,如果要包装所有可能的下拉菜单(取决于他们选择和提交的内容),您将需要大笔资金?为什么用户一次只能选择其中一项?这似乎是一种非常繁琐的编码方式以及一个繁琐的界面.

这将向您展示如何使用cfselect进行连接,但是我想如何执行此操作仍然有些奇怪.您要保存每件作品并加以展示还是在某个地方使用?还是仅仅是概念证明?

我可能会一直显示所有内容.对于汽车选择器(“年份”,“品牌”,“模型”,“修剪”级别)而言,依赖下拉列表更有意义,其中每个选择器都唯一依赖于先前的值.我不确定您要从您提出的问题中寻求什么.

无论如何,ColdFusion确实具有< cfselect>它将自动为您连接,尽管就我个人而言,我只会使用jQuery / Ajax.

使用标记的方法如下:
1)不要在onChange上提交表单.
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,它将返回一个手工构建的查询(我不知道您存储数据的方式/位置,因此可以随心所欲地换出真正的查询,只需将查询返回给请求即可:

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和列名.

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

只需确保将绑定中调用的方法名称与用于每种方法的名称匹配即可.

转载注明原文:html-从静态下拉列表到动态下拉列表Coldfusion - 代码日志