使用从 django json 模式生成的 javascript 引用 HTML 标签

Question

我正在尝试通过 javascript 引用由 django 的 django_jsonforms link JSON Schema link 生成的 HTML 标签来动态更新表单。例如，表单中的 2 个下拉列表，如果您在第一个下拉列表中创建 selection，则第二个下拉列表应该更新。我已经为我手动输入的 HTML selection 标签完成了此操作，但我正在尝试使其适用于 JSON 模式生成的 HTML。这是我尝试过的：

检查 HTML 页面并尝试使用

var project_selection = document.getElementsByName("form[project]")[0];

这没有用，我有点惊讶，因为我在检查页面时看到 select 标签有 name="form[project]"

然后我想也许 JSON 架构在 javascript 运行后呈现标签，所以我尝试将 defer 添加到我的 <script defer> 中没用
我尝试使用 JSON 模式 $id #anchor 和 $ref 但其中 none 通过 ID 引用标签

当我尝试使用 name 的虚拟标签时，我得到了一个 NodeList，我可以使用 project_section[0] 访问它，但是当我尝试对生成的 select 标签做同样的事情时通过 django 的 json 模式，我得到它看起来像一个空列表，但标签在它下面（但我无法访问它）。见下图。

带名称的 h1 标签的虚拟测试

实际的 django 生成了带有名称的 select 标签（看起来是空的，但当我展开它时它不是，但是，我无法在其上索引 [0] 项）

我相信有人以前遇到过这个问题，所以我希望这是一个简单的答案。

归根结底，我知道我需要将以下内容与 JSON 模式结合使用来执行类似于 onchange 的操作，如 link[=32= 所示]

var element = document.getElementById('editor_holder');

var editor = new JSONEditor(element, options);

editor.on('change',function() {
  // Do something
});

感谢您提前查看！

参考文献：

Answer 1

不完全确定这个，但你正在使用 getElementsByClassName，与元素的class名称相关。不是名字。例如：

<div class="cname"></div>

这是一个 class 名称，表单元素有一个 name 属性，您可以通过 var project_selection = document.getElementsByName("form[project]");

Answer 2

终于弄清楚是什么导致了这个问题。 DOM 在执行脚本以调用

之前未完成呈现 JSON 架构表单

var project_selection = document.getElementsByName("form[project]");

因此将上述脚本包装在 jquery 就绪函数中解决了这个问题。

<script>
     $('document').ready(function(){
          var project_selection = document.getElementsByName("form[project]");
          console.log(project_selection);
          console.log(project_selection[0]);
     });
</script>

查看更多信息：

使用从 django json 模式生成的 javascript 引用 HTML 标签

reference a HTML tag with javascript that was generated from django json schema

html

javascript

django

jquery

jsonschema