Lift 框架中的动态绑定

Question

我是 Lift 的新手，我有一个关于在 Lift 中使用绑定、Ajax 的问题。

我想使用 Ajax 以动态方式创建三个下拉菜单。我以“地址”为例来描述我想要实现的目标。首先，我只需显示“国家/地区”菜单，默认设置为“无”。此时用户可以根据需要选择提交，并且该地址将被视为默认地址。如果没有，她可以提供准确的地址。一旦她选择了国家/地区，就会显示“州”菜单，一旦她选择了“州”，就会显示“县”菜单。

在 lift 演示示例的帮助下，我尝试创建静态菜单，如下所示。我在 .html 文件和 scala 代码中创建了三个片段 、、，我绑定如下：

bind("select", xhtml,
     "system" -> select(Address.countries.map(s => (s,s)),
                       Full(country), s => country = s, "onchange" -> ajaxCall(JE.JsRaw("this.value"),s => After(200, replaceCounty(s))).toJsCmd),
     "state" -> stateChoice(country) % ("id" -> "state_select"),
     "county" -> countyChoice(state) % ("id" -> "county_select"),
     "submit" -> submit(?("Go!"),()=>Log.info("Country: "+country+" State: "+state + " County: "+ county)

对应的replaceCounty、stateChoice、countyChoice都是在我的类中定义的。但是，当选择国家/地区时，通过 Ajax 调用仅刷新州，而不刷新县。

Q1）有没有办法根据国家/地区菜单刷新两个菜单？

Q2）如何像我之前解释的那样动态创建菜单？

Answer 1

有一个出色的示例代码可以实现此目的：

http://demo.liftweb.net/ajax- form

如果您想通过 AJAX 更新来更新多个下拉列表，您将需要返回类似以下内容的内容：

ReplaceOptions(...) & ReplaceOptions(...)

Answer 2

使用 SHtml.ajaxSelect 作为第一个选择，并使用静态元素作为另外两个选择。当第一个选择更改时，您将返回 javascript 以使用另一个 SHtml.ajaxSelect 调用的结果填充下一个选择。

def countrySelect : NodeSeq = {
  val countryOptions = List(("",""),("AR","AR"))
  SHtml.ajaxSelect(countryOptions, Empty, { selectedCountry => 

    val stateOptions = buildStateOptions(selectedCountry)
    SetHtml("state-select", SHtml.ajaxSelect(stateOptions, Empty, { selectedState =>
      // setup the county options here.
    }))

  })
}

bind(namespace, in,
  "country" -> countrySelect,
  "state" -> <select id="state-select"/>,
  "county" -> <select id="county-select"/>)

在 #ajaxSelect 的回调中，您可能希望保存已选择的值，但这是我采取的一般方法。