Playframework scala helper for select input with optgroup - scala

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

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>

Answer 2

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 3

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