如何使选择菜单中的选项指向 Django URL答案

【问题标题】：How to make option in select menu point to Django URL如何使选择菜单中的选项指向 Django URL
【发布时间】：2019-08-02 10:37:28
【问题描述】：

我将这个视图命名为 context_processors.py，这意味着我可以在选择 html 标记中将存档显示为下拉菜单。

def blogposts_processor(request):
    blogposts = BlogPost.objects.all()
    q=blogposts.dates('date', 'month')
    s = [(i.strftime('%b'),i.strftime('%Y')) for i in q]

    return {'blogposts': blogposts,'s':s}

我已经提供了 2018 年 2 月、2018 年 4 月等日期：

 <script>   
    var n =[{% for i in q %}"{{ i|safe }}"{% if not forloop.last %},{% endif %}{% endfor %}];

    var k=[];

    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    var dynamicSelect = document.getElementById("selectdate");

    n.forEach(function(entry){
        a = new Date(entry);

        amonth=  months[a.getMonth()];
        ayear = a.getFullYear();
        c = amonth + " " + ayear;
        k.push(c);


        var newOption = document.createElement("option");
        newOption.text = c;
        dynamicSelect.add(newOption);
</script>

现在我的存档网址是

 url(r'^(?P<year>[0-9]{4})/(?P<month>[-\w]+)/$',
    BlogPostMonthArchiveView.as_view(),
    name="blogpost_month_archive"),

我希望选择下拉菜单中的每个选项都链接到正确的存档。所以菜单中的每个选项都应该有 URL

 {% url 'home:blogpost_month_archive' year='ayear' month='amonth' %}

我已经开始寻找解决方案here

   var url = "{% url 'home:blogpost_month_archive' year='2018' month='Feb' %}"
   var year = $(this).attr('ayear');
   var month = $(this).attr('amonth');
   document.location.href = url.replace('2018', year).replace('Feb', month);

我不是太远，我只是不知道如何将 document.location.href 位附加到选项元素。

我只是在寻找 JavaScript 解决方案。谢谢。

【问题讨论】：

标签： javascript django

【解决方案1】：

我刚用过

var year = $(this).val().slice(4,8);
var month = $(this).val().slice(0,3);

所以最终代码看起来像：

<script>    
    var n =[{% for i in q %}"{{ i|safe }}"{% if not forloop.last %},{% endif %}{% endfor %}];

    var k=[];

    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    var dynamicSelect = document.getElementById("selectdate");

    n.forEach(function myFunc(entry){
        a = new Date(entry);

        var amonth = months[a.getMonth()];
        var ayear = a.getFullYear();

        c = amonth + " " + ayear;
        k.push(c);

        var newOption = document.createElement("option");
        newOption.text = c;
        dynamicSelect.add(newOption);


        document.getElementById("selectdate").onclick=function(){

            var url  = "{% url 'home:blogpost_month_archive' year=2018 month='Feb' %}";
            var year = $(this).val().slice(4,8);
            var month = $(this).val().slice(0,3);
            document.location.href = url.replace('2018', year).replace('Feb', month);

        }

        });



</script>

我试图从 myFunc 中检索变量 amonth 和 ayear，然后在 onclick 函数中使用它，但我没有设法让它工作。所以这是我拥有的下一个最佳工作解决方案。

【讨论】：