Question

我想生成一个如下所示的选择列表 -

<select name="isActive">
   <option value="True">Yes</option>
   <option value="False">No</option>
</select>

为此我在ColdBox中使用select() HTML帮助器。

#html.select(
                options=qActiveOptions,
                nameColumn="value", 
                name="isActive",
                label="Active:",
                required="required",
                title="Active",
             )#

其中qActiveOption是我使用以下代码创建的查询 -

<cfset qActiveOptions=queryNew('name,value', "VarChar,VarChar")>
<cfset queryAddRow(qActiveOptions,2)>
<cfset querySetCell(qActiveOptions,'name','yes',1)>
<cfset querySetCell(qActiveOptions,'value','True',1)>
<cfset querySetCell(qActiveOptions,'name','no',2)>
<cfset querySetCell(qActiveOptions,'value','False',2)>

这会生成所需的结果，但正如您所看到的，我必须为此创建一个新的查询对象。我阅读了select HTML帮助器的文档，发现我们还可以提供对象数组来填充它。
是否有任何其他选项来填充选择列表，例如通过提供具有名称和值对的结构。

Answer 1

丹是对的，你可以传递一系列结构。首先，我要指出，如果您确定名称和值是相同的字符串，最简单的形式就是使用以逗号分隔的列表：

#html.select(
    options="Yes,No"
)#

这就是使用对象文字的结构数组。

#html.select(
    options=[
        {name:'Yes', value: 'true'},
        {name:'No', value: 'false'}
    ], 
    name="isActive",
    label="Active:",
    required="required",
    title="Active"
)#

产生的HTML是：

<label for="isActive">
    Active:
</label>
<select name="isActive" required="required" title="Active" id="isActive">
    <option value="true">
        Yes
    </option>
    <option value="false">
        No
    </option>
</select>

Answer 2

documentation for HTMLHelper缺少html.select()的条目，但如果直接转到source code，您会看到此函数可以使用查询对象，列表或对象数组作为options参数的值。

<cfargument 
   name="options"
   type="any"
   required="false" 
   default="" 
   hint="The value for the options, usually by calling our options() method"/>

文档中也缺少options()函数，但源代码评论得很好。

所以这是您的代码，使用选项的查询对象（我将nameColumn更改为column以获取您在上面输入的输出）：

<cfset qActiveOptions=queryNew('name,value', "VarChar,VarChar")>
<cfset queryAddRow(qActiveOptions,2)>
<cfset querySetCell(qActiveOptions,'name','yes',1)>
<cfset querySetCell(qActiveOptions,'value','True',1)>
<cfset querySetCell(qActiveOptions,'name','no',2)>
<cfset querySetCell(qActiveOptions,'value','False',2)>

<cfoutput>
#html.select(
    name="isActive",
    options= qActiveOptions,
    column="value", // renders the option tag's value attribute
    label="Active:",
    required="required",
    title="Active"
)#
</cfoutput>

呈现的HTML：

<label for="isActive">Active:</label>
<select name="isActive" required="required" id="isActive" title="Active">
    <option value="yes">yes</option>
    <option value="no">no</option>
</select>

现在有一个对象数组用于数据，使用html.options()来处理选项呈现。我删除了nameColumn属性，因为它默认为value密钥。

<cfset foo = [
    {"name"= "yes", "value"= "True"}
    , {"name"= "no", "value"= "False"}
] />

<cfoutput>
#html.select(
    name="isActive",
    options= html.options(foo),
    label="Active:",
    required="required",
    title="Active"
)#
</cfoutput>

生成相同的呈现HTML：

<label for="isActive">Active:</label>
<select name="isActive" required="required" id="isActive" title="Active">
    <option value="True">yes</option>
    <option value="False">no</option>
</select>

如何使用ColdBox中选择HTML帮助程序内的结构填充选择列表？

2 个答案: