如何使用golang的模板实现级联下拉菜单

一尘不染

如何使用golang的模板实现级联下拉菜单

场景：

我有一个级联方案，其中第二个下拉列表中的值首先取决于。我有三个模板“布局”，“输入”和“内部”。

尝试：

我正在对“输入”模板中的第一个下拉列表进行更改的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_

阅读 370

2020-07-02

共1个答案

一尘不染

在较高级别上，您有2个选项：

发送下拉列表的所有值（例如，作为树），并在较高级别的下拉列表更改时更改第二级和第三级的值（适用于小型列表，不适用于大型数据集）
或您选择的一个：当选择更改时，您将进行AJAX调用（从触发onchange），然后从结果中填充列表。

详细说明2：从AJAX调用结果中填充列表

您还可以通过以下两种方法执行此操作：

AJAX调用都会返回HTML调用，您可以简单地使用它们来替换HTML <select>标签的内部HTML 。
或者，AJAX调用可能仅返回数据（例如，使用JSON编码），而Javascript代码可以构建列表的内容。

AJAX返回HTML

AJAX调用可能会返回需要替换的完整HTML代码作为的内部HTML
<select>。要在服务器端实现此目的，您可以创建/分离仅负责生成此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>自己从中添加子标签。

要将添加<option>到一个<select>标签：

var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = "1234";
option.text = "Kiwi";
x.add(option);

因此，基本上，您需要做的是删除的当前子项<select>，遍历作为响应收到的列表，并添加一个<option>从每个子项构造的新标签。

2020-07-02