Question

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

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

在电梯演示示例的帮助下，我尝试创建静态菜单，如下所示。我在.html文件和scala代码中创建了三个片段<select:country/>, <select:state/>, <select:county/>，我绑定如下：

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的回调中，你可能想要保存所选内容的值，但这是我采用的一般方法。

Lift框架中的动态绑定

2 个答案: