Question

情境：

我有一个级联场景，其中第二个下拉列表中的值取决于第一个。我有三个模板＆＃34; layout＆＃34;，＆＃34; input＆＃34;和＆＃34;内部＆＃34;。

尝试：

我正在改变第一次下拉菜单中输入#j;输入＆＃34;模板并坚持处理返回的响应。目前我找到了通过替换第二个下拉列表的html来修复它的方法。但是，我认为这不是更好的处理方式。我想要一些渲染模板，我不需要修改html。

请以更好的方式帮助完成任务或指向一些维基。 仅限标准库

谢谢，

的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

Answer 1

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

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

Elaborating＃2：从AJAX调用结果中填充列表

您还有两个选项可以执行此操作：

AJAX调用返回HTML调用，您只需用它来替换HTML <select>标记的内部HTML。
或者AJAX调用可能只返回数据（例如使用JSON编码），而Javascript代码可以构建列表的内容。

AJAX返回HTML

AJAX调用可能会返回需要替换为<select>的内部HTML的完整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
}

使用Javascript

构建<select>内容

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>标记。

如何使用golang的模板实现级联下拉列表

1 个答案:

Elaborating＃2：从AJAX调用结果中填充列表

AJAX返回HTML

使用Javascript