如何在Django模板中显示选择下拉列表值？

debugcn 发表于 Dev

纳森·纽温

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

这是我页面上的照片：

这是我的views.py：def index（req）：

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添加逻辑的示例。

<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操作

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。