场景:
我有一个级联场景,其中第二个下拉列表中的值取决于第一个。我有三个模板“布局”、“输入”和“内部”。
尝试:
我正在对“输入”模板中第一个下拉列表的更改进行 ajax 调用,并坚持处理返回的响应。目前我找到了一种通过替换第二个下拉列表的 html 来修复它的方法。但是,我认为这不是更好的处理方式。我想要一些符合渲染模板的东西,我不需要修改 html。
请帮助以更好的方式完成任务或指向一些 wiki。 仅标准库
谢谢,
Layout.html: http://play.golang.org/p/LikKy6rf3-
Input.html: http://play.golang.org/p/wM7EpPdXuM
Inner.html: http://play.golang.org/p/xFpInKZfFT
Main.go: http://play.golang.org/p/cxtJU-Lhi1
最佳答案
在更高级别上,您有 2 个选择:
- 发送下拉列表的所有值(例如作为树)并在更高级别的下拉列表更改时更改第 2 和第 3 级别的值(适用于小型列表,不适用于大型数据集)
- Or the one you chose: when selection changes, you make an AJAX call (triggered from
onchange
) and you populate the list from the results.
细化#2:从 AJAX 调用结果填充列表
您还有 2 个选项可以执行此操作:
AJAX 调用返回 HTML 调用,您可以简单地使用它来替换 HTML 的内部 HTML
<select>
标签。或者 AJAX 调用可能只返回数据(例如使用 JSON 编码),而 Javascript 代码可以构建列表的内容。
AJAX 返回 HTML
AJAX 调用可能会返回需要替换的完整 HTML 代码作为 <select>
的内部 HTML .要在服务器端实现这一点,您可以创建/分离仅负责生成此 HTML 代码的 HTML 模板,例如:
{{define "innerList"}}
{{range .}}
<option value="{{.Key}}">{{.Text}}</option>
{{end}}
{{end}}
你只能像这样执行这个模板:
// tmpl is the collection of your templates
values := ... // Load/construct the values
tmpl.ExecuteTemplate(w, "innerList", values)
在这里values
是以下结构的一部分:
type Pair struct {
Key string
Text string
}
建筑<select>
内容与 Javascript
AJAX 调用可能会返回一个 JSON 数据结构,一个数组/列表 value;text
从中添加 <option>
的对 child 自己标记。
添加 <option>
到 <select>
标签:
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = "1234";
option.text = "Kiwi";
x.add(option);
所以基本上您需要做的是删除 <select>
的当前子项,遍历作为响应收到的列表并添加一个新的 <option>
由每个构造的标签。
关于javascript - 我如何使用 golang 的模板实现级联下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29510296/