Question

我对此非常陌生，所以我需要一些帮助。

我有两个这样的结构：

type School struct {
    ID          string
    Name        string
    Students    []Student
}

type Student struct {
    ID          string
    Name        string
}

我需要做的是当我从第一个选择元素中选择一个School对象时，第二个选择元素仅显示来自所选学校的学生。对象数组学校正确显示所有数据。

<div>
  <select name="school">
      {{range .Schools}}
          <option value="{{.ID}}">{{.Name}}</option>
      {{end}}
  </select>
</div>   <div>
  <select name="student">
  {{range .Students}}
          <option value="{{.ID}"> {{.Name}}</option>
       </select>
  {{end}}  </div>

我需要在第二个选择范围内选择像selectedSchoolObject.Students。

提前致谢！

Answer 1

Go模板在Go应用中的服务器端执行并呈现。

当在学校下拉列表中选择某些内容时，会在浏览器中选择客户端。

浏览器无法执行Go模板。所以基本上你有两个选择：

1）当用户更改“学校”下拉列表的选择时，重新渲染页面。这涉及发送新的HTTP请求，例如，您可以在URL参数中提供所选Scool的ID，并且Go模板可以仅在第二个下拉列表中呈现所选学校的学生。

2）您可以使用JavaScript代码在客户端实现此功能。为此，您需要在呈现的HTML页面中包括所有学校的所有学生，例如在JavaScript数组中，并使用JavaScript代码更改学生下拉列表的内容。

阅读相关问题：

Referencing Go array in Javascript

Interactive web pages in Go

Dynamically refresh a part of the template when a variable is updated golang

Creating load more button in Golang with templates

Answer 2

我已在客户端使用Javascript解决了这个问题。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function() {
        var school = {};
        var schoolsArray = [];
        {{range .Schools}}
            school.ID = {{.ID}};
            school.Name = {{.Name}};
            school.Students = {{.Students}};
            schoolsArray.push(school);
        {{end}}

        $("#school").change(function() {
            var parent = $(this).val();
            Object.keys(schoolsArray).forEach(function (key) {
                if (schoolsArray[key]['ID'] === parent) {
                    var students = schoolsArray[key]['Students'];
                    listStudents(students);
                }
            });
        });
        function listStudents(students) {
            Object.keys(students).forEach(function (key) {
                $('#student').append($('<option>', {
                    value: students[key]['ID'],
                    text : students[key]['Name']
                }));
            });
        } </script>

这是我的HTML代码：

<div>
  <select name="school" id="school">
      {{range .Schools}}
          <option value="{{.ID}}">{{.Name}}</option>
      {{end}}
  </select>
</div>   <div>
  <select name="student" id="student">
       </select>
</div>

希望这对其他人也有帮助。此外，欢迎任何改进此代码的建议。

Golang模板

2 个答案: