将选定的引导程序下拉菜单选项传递给Play框架表单

Question

我已经在我的 file.scala.html 中插入了一个bootstrap下拉菜单，我还有一个脚本显示所选项目作为下拉菜单的按钮。我使用bootstrap图标而不是文本。

现在，我想将所选项目传递给我传递给 scala.html 文件的Form，但我发现传递值的唯一方法是@helper.inputtext

这是我的代码：

<script>
$(function(){
  $(".dropdown-menu li a").click(function(){
    $(".btn:first-child").html($(this).html());
  });
});
</script>

@helper.form(action = routes.CategoriesInfo.save()) {
<fieldset>
    @helper.inputText(sampleForm("name"),'_label -> "Name")
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" 
              id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" 
              aria-expanded="true">
            Icon
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#"><i class="icon-bank"></i></a></li>
            <li><a href="#"><i class="icon-mail"></i></a></li>
            <li><a href="#"><i class="icon-music"></i></a></li>
            <li><a href="#"><i class="icon-bus"></i></a></li>
        </ul>
    </div>
    <br>
</fieldset>
<input type="submit" class="btn btn-primary" value="Save">

Answer 1

有几个选项

组合物

创建一个单独的case类，它由表单和返回选择的方法/值组成。然后，您可以选择定义一个方法，该方法从字段（def selectedItem）中获取选择，或者您明确地传递选择（selectedItem2）：

case class ComposedForm(form: Form[User], selectedItem2: String) {
  def selectedItem: String = {
    form.forField("name") { f =>
      f.value.getOrElse("No selection")
    }
  }
}

然后您可以将组合实例传递到视图中（此代码段未完成，但它显示了相关部分）：

@(cform: ComposedForm)

@helper.inputText(cform.form("name"))

@cform.selectedItem

专业化（扩展）

您可以扩展Form：

class ExtendedForm(mapping: Mapping[User]) extends Form[User](mapping = mapping, 
    data = Map.empty, errors = Nil, value = None) {

  def selectedItem: String = {
    forField("name") { f =>
      f.value.getOrElse("No selection")
    }
  }
}

这是像这样定义的

  val extendedUserForm =
    new ExtendedForm(
      Forms.mapping(
        "id" -> Forms.number,
        "name" -> Forms.nonEmptyText)
        (User.apply)
        (User.unapply))

在视图中（再次，代码段未完成）：

@(eform: ExtendedForm)

@helper.inputText(eform("name"))

@eform.selectedItem

传递单独的值

这基本上只留下表单，您只需将选定的项目作为单独的值传递给视图。