Django .html想要访问 html 代码中的选定选项

Django .html want to access selected option within html code

本文关键字：html 选项 代码 访问 Django      更新时间：2023-09-26

我有一个.html页面，应该显示排行榜。目前，我的代码同时显示不同类别(资源管理器、评估器、评论员等(的所有排行榜。这些排行榜的信息存储在上下文变量中，该变量通过后台的 .view 文件传递到.html页面。我的页面代码如下所示：

{% include "base.html" %}
{% block content %}
    <select name="select">
    {% for instance in leaderboardDictionaries %}
        {% for category, userDictionary in instance.items %}
            <option value="{{category}}">{{category}}</option>
        {% endfor %}
    {% endfor %}
    </select>

<table class='table'>
    {% for instance in leaderboardDictionaries %}
        {% for category, userDictionary in instance.items %}
            <tr><td> {{category}} </td></tr>
            {% for name, points in userDictionary.items %}
                <tr><td>{{name}}</td><td>{{points}}</td></tr>
            {% endfor %}
        {% endfor %}
    {% endfor %}
</table>
{% endblock %}

我希望能够显示特定的排行榜。假设用户从下拉选项字段中选择"赋值器"。然后应该显示这一点。如何找出.html文件中选择了哪个选项并显示相应的信息？

如果我知道我该怎么做，那已经对我有很大帮助，例如：

if optionvalue = "Evaluator" make <p> Hello there you have chosen Evaluator </p>

我知道这不是一个好例子，但这就是我总体上想做的事情。

你能在这个小提琴中做一些类似的事情吗？

https://jsfiddle.net/kq2d4x2n/

$(document).ready(function(){
    $('#test').on('change', function(){
    var choice = $('#test').val();
    $('.banner').html('You chose' + ' ' + choice);
        $('.' + choice +'').show();
    });
});

选择时从下拉列表中获取值，然后显示具有相应类的表。

下面是一个使用 jQuery 的最小示例。每当 a 用户选择一个值时，它都会创建一个alert。运行下面的代码以查看它的实际效果。

<select name="select">
    <option value="">Choose a value</option>
    <option value="">-----------------------</option>
    <option value="Evaluator">Evaluator</option>
    <option value="Commentator">Commentator</option>
    <option value="Explorer">Explorer</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('select[name=select]').on('change', function() {
    var chosen_val = $(this).val();
    if (chosen_val) {
        alert('Hey there you have selected ' + chosen_val);
    }
});
</script>

非常感谢您的提示。在你的帮助下，我想通了。尽管如此，对于所有其他正在寻找解决方案的人来说，这是我的实现，它有效。虽然我不确定，如果我使用的是纯JavaScript，还是Javascript和JQuery的混合体。我的选择：

<select name="leaderboardOptions" id="leaderboardOptions">
<option value="Select">Select</option>
{% for instance in leaderboardDictionaries %}
    {% for category, userDictionary in instance.items %}
    <option value="{{category}}">{{category}}</option>
    {% endfor %}
{% endfor %}
</select>

我的 Javascript 函数？

<script>
$(document).ready(function(){
$('#leaderboardOptions').on('change', function(){
var choice = $('#leaderboardOptions').val();
var choiceArray = new Array();
var availableOptions = document.getElementById('leaderboardOptions').options;
for(i = 0; i < availableOptions.length; i++){
    choiceArray.push(availableOptions[i].value);
}
for(i = 0; i < choiceArray.length; i++){
    if(choiceArray[i] === choice){
        $('.' + choiceArray[i] +'').show();
    }
    else{
        $('.' + choiceArray[i] +'').hide();
    }
}
});
});
</script>

这里有两张桌子作为例子(我还有很多....仍然想知道是否有可能以更动态的方式...

<div class="Explorer" style="display:none">
<table class='table'>
{% for instance in leaderboardDictionaries %}
    {% for category, userDictionary in instance.items %}
        {% if category == "Explorer" %}
            <tr><td> {{category}} </td></tr>
            {% for name, points in userDictionary.items %}
                <tr><td>{{name}}</td><td>{{points}}</td></tr>
            {% endfor %}
        {% endif %}
    {% endfor %}
{% endfor %}
</table>
</div>
<div class="Evaluator" style="display:none">
<table class='table'>
{% for instance in leaderboardDictionaries %}
    {% for category, userDictionary in instance.items %}
        {% if category == "Evaluator" %}
            <tr><td> {{category}} </td></tr>
            {% for name, points in userDictionary.items %}
                <tr><td>{{name}}</td><td>{{points}}</td></tr>
            {% endfor %}
        {% endif %}
    {% endfor %}
{% endfor %}
</table>
</div>

以及我在开始时忘记的内容 ->插入您的 html 或head_css.html文件中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
相关文章：