静态下拉菜单到动态下拉菜单Coldfusion

Question

我是堆栈溢出的新手。我需要创建一个静态下拉列表，然后根据在静态下拉列表中选择的值创建一个动态下拉列表。只是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>

Answer 1

除非您在每次选择后都重新提交页面并重新查询相关的下拉列表值，否则必须使用某种客户端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，它将返回一个手工查询（我不知道您html" target="_blank">存储数据的方式/位置，因此可以随心所欲地换出实际查询，只需将查询返回给请求即可：

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

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