如何在 django 模板中显示选择下拉值？答案

【问题标题】：How can I show select dropdown value in django template?如何在 django 模板中显示选择下拉值？
【发布时间】：2020-07-02 18:22:39
【问题描述】：

我正在尝试实现如何获取下拉值以更改页面中显示的数据：

这是我页面上的一张照片：

这是我的views.py：定义索引（请求）：

test = [
    {"name": "hello", "age": 30, "size": 100},
    {"name": "ewefef", "age": 12, "size": 32},
    {"name": "12d1", "age": 13, "size": 123},
    {"name": "dsf", "age": 54, "size": 324},
    {"name": "gfd", "age": 1, "size": 12},
    {"name": "vcb", "age": 3, "size": 3},
    {"name": "csd", "age": 4, "size": 1},
    {"name": "a", "age": 32, "size": 11},
    {"name": "wfwef", "age": 123, "size": 33},
]
context = {
    'test': test,
}

return render(req, 'index.html', context)

这是我的模板index.html:

<select name="pick" id="mySelect">
    <option value="name">name</option>
    <option value="age">age</option>
    <option value="size">size</option>
</select>

{% for i in test %}
<div id="demo">{{i.name}}</div>
{% endfor %}

我想实现，当我选择name时它会显示名字，当我选择年龄时它只会显示年龄......我该怎么做？

【问题讨论】：

您应该使用 javascript 和 DOM 操作来实现这一点。
@mprostak 你能举个例子吗？

标签： python django

【解决方案1】：

这是一个如何使用 javascript 添加逻辑的示例。

<select name="pick" id="mySelect">
    <option value="name">name</option>
    <option value="age">age</option>
    <option value="size">size</option>
</select>

<div id="name">
    {% for i in test %}
        <p>{{i.name}}</p>
    {% endfor %}
</div>

<div id="age" style="display: none;">
    {% for i in test %}
        <p>{{i.age}}</p>
    {% endfor %}
</div>

<div id="size" style="display: none;">
    {% for i in test %}
        <p>{{i.size}}</p>
    {% endfor %}
</div>

<script>

    let current = document.getElementById('name');

    function changeSelect (idDivName) {
        current.style.display = 'none';
        current = document.getElementById(idDivName);
        current.style.display = 'block';
    }

    document.getElementById('mySelect').addEventListener('change', function() {
        changeSelect(this.value);
    });

</script>

在示例中，它位于三个不同的循环中。你也可以在一个循环中做，但是你需要稍微改变一下逻辑。

您可以在这里找到更多信息：DOM Manipulation

【讨论】：