Question

在回发后自动为select / option元素设置所选项目的最佳方法是什么？以下是我们目前的做法：

<select id="grade" name="grade">
  <option value="A"<cfif form.grade = 'A'> selected="selected"</cfif>>A</option>
  <option value="B"<cfif form.grade = 'B'> selected="selected"</cfif>>B</option> 
  <option value="C"<cfif form.grade = 'C'> selected="selected"</cfif>>C</option> 
  <option value="D"<cfif form.grade = 'D'> selected="selected"</cfif>>D</option> 
  <option value="F"<cfif form.grade = 'F'> selected="selected"</cfif>>F</option>
</select>

使用ColdFusion有更清洁或更简单的方法吗？提前谢谢！

Answer 1

在我看来，最好的方法之一是使用CFSelect：

<cfquery name="getGrades" datasource="#application.dsn#">
  select gradeLetter from Grades
</cfquery>

<cfselect
  name="grade"
  query="getGrades"
  display="gradeLetter"
  value="gradeLetter"
  selected="#form.grade#" />

Answer 2

像这样：

<cfsavecontent variable="GradeOptions">
A:A
B:B
C:C
D:D
F:F
</cfsavecontent>

<select id="grade" name="grade">
    <cfloop index="CurOpt" list="#trim(GradeOptions)#" delimiters="#Chr(10)#">
        <option value="#ListFirst(CurOpt,':')#"<cfif form.grade EQ ListFirst(CurOpt,':')> selected="selected"</cfif>>#ListRest(CurOpt,':')#</option>
    </cfloop>
</select>

这假设您总是有单独的值：标签信息 - 如果您的值和标签始终相同，您可以这样做：

<cfsavecontent variable="GradeOptions">
A
B
C
D
F
</cfsavecontent>

<select id="grade" name="grade">
    <cfloop index="CurOpt" list="#trim(GradeOptions)#" delimiters="#Chr(10)#">
        <option<cfif form.grade EQ CurOpt> selected="selected"</cfif>>#CurOpt#</option>
    </cfloop>
</select>

Answer 3

您也可以使用一组结构来执行此操作。

<cfparam name="form.grade" default="C">
<cfset mydata = [{grade="A",value="A"},{grade="B",value="B"},{grade="C",value="C"},{grade="D",value="D"},{grade="F",value="F"}]>
<cfoutput>
<select id="grade" name="grade">
    <cfloop array="#mydata#" index="i">
        <option value="#i['value']#"<cfif form.grade EQ i['grade']> selected="selected"</cfif>>#i['value']#</option>
    </cfloop>
</select>
</cfoutput>

Answer 4

将cfscript与函数

一起使用

<cfscript>
Function setSelected(val1, val2){
    if (val1 EQ val2)
    {
        Return 'selected="selected"';
    } 
    else 
    {
        Return '';
    }
}
</cfscript>
<select id="grade" name="grade">
  <option value="A" #setSelected('A', form.grade)#>A</option>
  <option value="B" #setSelected('B', form.grade)#>B</option> 
  <option value="C" #setSelected('C', form.grade)#>C</option> 
  <option value="D" #setSelected('D', form.grade)#>D</option> 
  <option value="F" #setSelected('F', form.grade)#>F</option>
</select>

Answer 5

这个怎么样？

<cfparam name="form.grade" default="A">
<cfoutput>
<select id="grade" name="grade">
<cfloop index="code" from="65" to="90">
    <option value="#Chr(code)#"<cfif form.grade EQ Chr(code)> selected="selected"</cfif>>#Chr(code)#</option>
</cfloop>
</select>
</cfoutput>

有点棘手，是啊：）

Answer 6

你知道，这样说可能不受欢迎，但你最初在问题中概述的解决方案是最好的。

这很简单，很容易看出正在做什么，并且它不会因为棘手而变得棘手。

有时你只需要戴手套

http://thedailywtf.com/Articles/The_Complicator_0x27_s_Gloves.aspx

Answer 7

要扩展我的另一个答案，您应该做的是通过将等级存储在数据库中并使用类似于以下的代码来正确地将数据与界面分离：

<cfset GradeOptions = Grades.readAvailable() />

<select id="grade" name="grade">
    <cfloop query="GradeOptions">
        <option value="#GradeCode#"
            <cfif Form.Grade EQ GradeCode>selected="selected</cfif>
            >#GradeCode# - #GradeDesc#</option>
    </cfloop>
</select>

（同样，如果只将等级视为单个字母，则可以在简单的列表/数组中提供值，而不是查询。）

关键是，您无需更改界面即可更改成绩结构，同样更新界面并不需要您了解成绩。

Answer 8

说实话，我看不出其中任何一项比初始通过的更正版本更好（下图）

   <select id="grade" name="grade">
      <option value="A"<cfif form.grade EQ "A"> selected </cfif> >A</option>
      <option value="B"<cfif form.grade EQ "B"> selected </cfif> >B</option> 
      <option value="C"<cfif form.grade EQ "C"> selected </cfif> >C</option> 
      <option value="D"<cfif form.grade EQ "D"> selected </cfif> >D</option> 
      <option value="F"<cfif form.grade EQ "F"> selected </cfif> >F</option>
   </select>

简单，干净，易懂。

如果您只是觉得需要更加流畅并且将要进行大量的UI操作，那么可以在jQuery中投入一些时间。研究Ray Camden的jQuery and CF Posts和Ben Nadel的Javascript and CF Posts，很快这将成为第二天性......

<script type="text/javascript">                                         
  jQuery(document).ready(function() {
     $("#grade option[value='<CFOUTPUT>#FORM.Grade#</CFOUTPUT>']")
      .attr('selected', 'selected');
  });
</script>

<select id="grade" name="grade">
  <option value="A">A</option>
  <option value="B">B</option> 
  <option value="C">C</option> 
  <option value="D">D</option> 
  <option value="F">F</option>
</select>

当然，这里看起来比其他一些选项更加狡猾，但是在解决问题方面非常强大，一旦你学会了CF就不会很好（相信我，它会很快变得有意义，你会想知道你是怎么做的没有它的客户端UI代码。）

了解任何流行的JavaScript库，您的ColdFusion客户端代码将变得更加优雅和强大。

ColdFusion自动选择选项

8 个答案: