ColdFusion auto select option

Question

What is the best way to automatically set a selected item for a select/option element on post-back? Here's the way we're currently doing it:

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

Is there a cleaner or easier way to do this with ColdFusion? Thanks in advance!

Answer 1

Like this:

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

That assumes you always have separate value:label information - if your value and label are always the same, you can do this:

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

You could also do this with an array of structs.

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

What about this?

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

A bit tricky, yeah :)

Answer 4

using cfscript with functions

<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

You know, it may be unpopular to say so, but the solution that you originally outlined in the question is the best.

It's simple, it's easy to see what is being done, and it's not trying to be tricky just to be tricky.

Sometimes you just need to wear gloves

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

Answer 6

To expand on my other answer, what you should be doing is properly separating your data from your interface, by storing the grades in your database, and using code similar to:

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

(Again, if grades are only to be treated as a single letter, the values can be provided in a simple list/array rather than query.)

The key thing is, you can change your grade structure without having to change your interface, and likewise updating the interface doesn't require you to know what the grades are.

Answer 7

To be honest I can't see how any of these are better than a corrected version of your initial pass (below)

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

It is simple, clean and understandable.

If you just feel a need to be slicker and are going to be doing a lot of UI manipulation invest some time in jQuery. Study Ray Camden's jQuery and CF Posts and Ben Nadel's Javascript and CF Posts and soon this will be second nature...

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

Sure, it's wackier looking than some of the other options here but amazingly powerful at solving problems that CF just isn't good at once you learn it (trust me, it will quickly make sense and you will wonder how you ever did client UI code without it).

Learn any of the popular JavaScript libraries and your ColdFusion client side code will become dramatically more elegant and powerful.

Answer 8

In my opinion, one of the best ways to go is to use a CFSelect:

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

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