Playframework scala helper for select input with optgroup

Question

Is in playframework scala helper to achive optgroup in input select?

Example:

 http://jsfiddle.net/g4ffzvs8/

Code:

<select style="width:300px" id="source">
               <optgroup label="Alaskan/Hawaiian Time Zone">
                   <option value="AK">Alaska</option>
                   <option value="HI">Hawaii</option>
               </optgroup>
               <optgroup label="Pacific Time Zone">
                   <option value="CA">California</option>
                   <option value="NV">Nevada</option>
                   <option value="OR">Oregon</option>
                   <option value="WA">Washington</option>
               </optgroup>
              </select>

Answer 1

Here is my working solution:

<div class="clearfix @if(MedicalIncidentForm("incidentType.id").hasErrors) {error}">
    <label class="note note-title  note-@if(MedicalIncidentForm("incidentType.id").hasErrors) {error} else {success}" for="incidentType_id">Rodzaj</label>
    <div class="input note note-footer note-@if(MedicalIncidentForm("incidentType.id").hasErrors) {error} else {success}">
        <select name="incidentType.id" onchange="checkSelectedValue(this)">
            <option></option>
            @for(opt <- new IncidentType().getOptionGroups()) {
               <optgroup label="@opt._1">
                    @for(op <- opt._2) {
                        @**
                        <option  value="@op._1">@op._2</option>
                        **@
                        <option value="@op._1" @if(MedicalIncidentForm("incidentType.id").value() == op._1) {selected="selected"}>@op._2</option>
                    }
                </optgroup>
            }
        </select>
        </div>
</div>

Answer 2

Look at the select helper in scala : https://github.com/playframework/playframework/blob/master/framework/src/play/src/main/scala/views/helper/select.scala.html

There is no mention of optgroup so I think the answer is no. Anyway, you can create a helper of your own by copying the code and customize it so that it is integrating the optgroups. For example this is my code for my custom input text. I had to removw implicit i18n language because of a bug :

@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: views.html.helper.FieldConstructor)

@inputType = @{ args.toMap.get('type).map(_.toString).getOrElse("text") }
@inputClass = @{ args.toMap.get('class).map(_.toString) }

@helper.input(field, args.filter(_._1 != 'type).filter(_._1 != 'class):_*) { (id, name, value, htmlArgs) =>
    <input type="@inputType" id="@id" class="form-control @inputClass" name="@name" value="@value" @toHtmlArgs(htmlArgs)/>
}

Answer 3

None of the answers satisfied me. Created a new version of the select helper that accepts group names:

@(field: play.api.data.Field, options: Seq[(String, Seq[(String,String)])], args: (Symbol,Any)*)(implicit handler: helper.FieldConstructor, messages: play.api.i18n.Messages)

@helper.input(field, args:_*) { (id, name, value, htmlArgs) =>
    @defining( if( htmlArgs.contains('multiple) ) "%s[]".format(name) else name ) { selectName =>
    @defining( field.indexes.nonEmpty && htmlArgs.contains('multiple) match {
        case true => field.indexes.map( i => field("[%s]".format(i)).value ).flatten.toSet
        case _ => field.value.toSet
    }){ selectedValues =>
        <select id="@id" name="@selectName" @toHtmlArgs(htmlArgs)>
            @args.toMap.get('_default).map { defaultValue =>
                <option class="blank" value="">@defaultValue</option>
            }
            @options.map { case (groupName, elements) =>
                <optgroup label="@groupName">
                @elements.map { case (k, v) =>
                    @defining( selectedValues.contains(k) ) { selected =>
                    @defining( args.toMap.get('_disabled).exists { case s: Seq[String] => s.contains(k) }){ disabled =>
                        <option value="@k"@if(selected){ selected="selected"}@if(disabled){ disabled}>@v</option>
                    }
                }
                </optgroup>
            }}
        </select>
    }}
}

(Use lang : play.api.i18n.Lang instead of messages: play.api.i18n.Messages for Play versions prior to 2.4).

You can use this helper this way:

@groupSelect(
    form("brand"),
    Seq(
        "Swedish Cars" -> Seq(
            "volvo" -> "Volvo",
            "saab" -> "Saab"
        ),
        "German Cars" -> Seq(
            "mercedes" -> "Mercedes",
            "audi" -> "Audi"
        )
    )
)

And it will render this:

<select id="brand" name="brand">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>