如何使用ColdBox中的选择HTML帮助器中的结构填充选择列表？ [英] How to populate a select list using a structure inside select HTML helper in ColdBox?

问题描述

我想生成一个类似以下内容的选择列表：

 < select name =isActive ; 
< option value =True>是< / option> 
< option value =False>否< / option> 
< / select> 
  

为此，我使用 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帮助器的文档，发现我们还可以提供对象数组来填充它。

解决方案

HTMLHelper 的文档缺少 html的条目.select（），但如果直接转到源代码，你会看到这个函数可以接受查询对象，列表或对象数组作为选项的值参数。

 < cfargument 
 name =options
 type =any
 required =false
 default =
 hint =选项的值通常通过调用我们的options（）方法/>  

文档中还缺少 options（）函数，但是源代码被注释得很好。 / p>



这里是你的代码，使用查询对象的选项（我改变了 nameColumn 到 column ，以便获取上面输入的输出）：

 < cfset qActiveOptions = queryNew 'name，value'，VarChar，VarChar）> 
< cfset queryAddRow（qActiveOptions，2）> 
< cfset querySetCell（qActiveOptions，'name'，'yes'，1） b $ b< 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，//呈现选项标签的值属性
 label =Active：，
 required =required，
 title =活动
）＃
< / cfoutput>  





 < label for =isActive> Active：< / label> 
< select name =isActiverequired = requiredid =isActivetitle =Active> 
< option value =yes> yes< / option> 
< option value =no> no< / option 
< / select>  



现在用数据的对象数组使用 html.options（）来处理选项渲染。我删除了 nameColumn 属性，因为它默认为 value 键。

$ b b

 < 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 =isActiverequired =requiredid = isActivetitle =Active> 
< option value =True> yes< / option> 
< option value =False> no< / option> 
& / select>  

I want to generate a select list that should look like the following-

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

For this I am using select() HTML helper in ColdBox.

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

Where qActiveOption is the query that I created using the code below-

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

This generates the desired result but as you can see I have to create a new query object just for that. I read the documentation of the select HTML helper and found that we can also provide array of objects to populate it.
Is there any other option to populate a select list such as by providing a structure with name and value pair.

解决方案

The documentation for HTMLHelper is lacking an entry for html.select(), but if you go directly to the source code, you'll see that this function can take a query object, a list or an array of objects as the value for the options argument.

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

The options() function is also missing from the documentation, but the source code is commented quite well.

So here's your code, using a query object for the options (I changed nameColumn to column in order to get the output you entered above):

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

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

Now with an array of objects for data, using html.options() to handle the option rendering. I removed the nameColumn attribute as it defaults to the value key.

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

Which produces the same rendered 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帮助器中的结构填充选择列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！