使用JavaScript根据选中选项显示Django表单字段

你的代码里控制id_mapnubparam01字段失效的核心原因是：原生JavaScript的DOM元素没有.hide()和.show()方法，这两个方法是jQuery框架专属的，直接调用会导致代码报错，从而无法执行显示/隐藏逻辑。

修正方案 #

1. 替换显示/隐藏的实现方式 #

用原生JS的style.display属性来控制元素的显示状态：

• 隐藏元素：设置element.style.display = 'none'
• 显示元素：设置element.style.display = 'block'（如果元素原本是行内元素，可改用'inline'或'inline-block'）

2. 确保函数被触发 #

需要给id_mapnubfunction字段添加change事件监听，这样当字段值变化时才会执行myFunction。同时页面加载时执行一次函数，确保初始显示状态正确。

修正后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data</title>
</head>
<body>
    <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            {% for field in form %}
                <div class="fieldWrapper">
                    <label>{{ field.label_tag }}</label>
                    {{ field }}
                </div>
            {% endfor %}
        <input type="submit" value="Submit">
    </form>
<p id="demo"></p>

    <script>
    function myFunction() {
      var x = document.getElementById("id_mapnubfunction").value;
      // 控制p标签的逻辑保持不变
      if (x != 'GETDATA') {
          document.getElementById("demo").innerHTML = "";
      } else {
          document.getElementById("demo").innerHTML = "You selected: " + x;
      }
      // 修正后的字段显示/隐藏逻辑
      var paramField = document.getElementById('id_mapnubparam01');
      if (x != 'GETDATA') {
          paramField.style.display = 'none';
      } else {
          paramField.style.display = 'block';
      }
    }

    // 页面加载完成后初始化状态并绑定事件
    document.addEventListener('DOMContentLoaded', function() {
        myFunction();
        document.getElementById("id_mapnubfunction").addEventListener('change', myFunction);
    });
    </script>

</body>
</html>

额外说明 #

如果需要隐藏的是包含字段的整个容器（比如div.fieldWrapper），可以修改获取元素的逻辑：

var paramWrapper = document.getElementById('id_mapnubparam01').closest('.fieldWrapper');
if (x != 'GETDATA') {
    paramWrapper.style.display = 'none';
} else {
    paramWrapper.style.display = 'block';
}

内容的提问来源于stack exchange，提问作者babsdoc