如何使用golang的模板实现级联下拉菜单 [英] How do I implement cascading dropdown using golang's templates

问题描述

场景:

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

I have a cascade scenario, where values in second dropdown depends upon first. I have three templates "layout", "input" and "inner".

尝试:

我正在对输入"模板中第一个下拉列表的更改进行ajax调用，并停留在处理返回的响应上.目前，我找到了一种方法来替换第二个下拉列表的html来解决此问题.但是，我认为这不是更好的处理方法.我想要一些不需要修改html的渲染模板.

I'm making ajax call on change of first dropdown in "input" template and stuck with handling the response returned. Currently I found a way to fix it by replacing html of second dropdown. But, I think this is not the better way to handle. I want something in line of rendering templates where I do not need to amend html.

请以更好的方式帮助您完成任务，或指向一些Wiki. 仅标准库

please help in acheiving the task in better way or point to some wiki. Only Standard Library

谢谢

Layout.html : http://play.golang.org/p/LikKy6rf3-

Layout.html: http://play.golang.org/p/LikKy6rf3-

Input.html : http://play.golang.org/p/wM7EpPdXuM

Input.html: http://play.golang.org/p/wM7EpPdXuM

Inner.html : http://play.golang.org/p/xFpInKZfFT

Inner.html: http://play.golang.org/p/xFpInKZfFT

Main.go : http://play.golang.org/p/cxtJU-Lhi1

Main.go: http://play.golang.org/p/cxtJU-Lhi1

推荐答案

在更高级别上，您有2个选择:

On the higher level you have 2 options:

• 发送所有下拉列表的值(例如，作为树)，并在较高级别的下拉列表发生更改时更改第二级和第三级的值(适用于小型列表，不适用于大型数据集)
• 或者你选择的一个:当选择的变化，你做一个AJAX调用(从触发)和您填充从结果列表
.

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

You also have 2 options to do this:

• AJAX调用均返回HTML调用，您可以简单地使用它们来替换HTML <select>标记的内部HTML.

• Either the AJAX call returns HTML call which you can simply use to replace the inner HTML of the HTML <select> tag.

或者AJAX调用只能返回数据(例如，使用JSON编码)，而Javascript代码可以构建列表的内容.

Or the AJAX call may only return the data (e.g. encoded using JSON), and a Javascript code can build the content of the list.

AJAX调用可能返回需要替换的完整HTML代码作为<select>的内部HTML.要在服务器端实现此目的，您可以创建/分离仅负责生成此HTML代码的HTML模板，例如:

The AJAX call may return the complete HTML code needed to be replaced as the inner HTML of the <select>. To achieve this at server side, you can create/separate the HTML template responsible only to generate the HTML code of this, for example:

{{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是以下结构的一部分:

Here values is a slice of the following structure:

type Pair struct {
    Key string
    Text string
}

使用Javascript构建<select>内容

AJAX调用可能返回JSON数据结构，即一个value;text对的数组/列表，您可以从中自己添加<option>子标记.

Building <select> content with Javascript

The AJAX call may return a JSON datastructure, an array/list of value;text pairs from which you add the <option> child tags yourself.

要将<option>添加到<select>标签:

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

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

So basically what you need to do is remove current children of the <select>, iterate over the list received as the response and add a new <option> tag constructed from each.

这篇关于如何使用golang的模板实现级联下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！