Javascript window.location重定向后预选html选择选项

我有一个问题，在页面被重定向后，我希望选择之前选择的选项作为页面被重定向后选择的选项

这里我有一个onchange用于我的select，它将根据用户的selectionrefresh页面重定向用户，但是在页面刷新之后，所选选项将被重置，列表中的第一个选项将被选中

    $("#reportTypes").change(function () {
    var reportTypeID = $(this).val();

    var deviceTypeID = $('#hDeviceTypeID').val();

    window.location.href = "http://127.0.0.1:6543/new_device/" + deviceTypeID + "/" + reportTypeID;

    $('#reportTypes').val(reportTypeID);//tried to select the previous option but this doesn't seem to work

});

---

如何让我的select显示所选选项而不在页面加载后重置？

如果将参数发送到与get请求参数相同的页面并导致页面重新加载，则可以使用JavaScript解析url参数，然后在页面加载时将下拉设置为指定值

在此处使用@BrunoLM指定的函数进行url参数解析：

现在，我们在页面加载时执行此函数以获取值：

//$(function {}); is a shorthand for $(document).ready(function() {});
$(function() {
    //execute this code to grab the url params
    var urlParams = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'));

    //now we check to see if the parameter was passed and if so, set the dropdown value
    if (urlParams['reportTypeId']) {
        $('#reportTypes').val(urlParams['reportTypeId']);
    }
});

---

这一切都假设您传递了一个名为reportTypeId的HTTP GET参数，如下所示：reportTypeId=203

这是关于同一问题的第二个问题，我强烈感觉您不清楚何时何地发生了什么。我希望我能给你一个链接到一些网络如何工作的介绍，但不幸的是，我不知道任何。无意冒犯，只是说

非常简单地说，在金字塔应用程序的上下文中，事情按以下顺序发生：

浏览器向服务器发送一个请求，这基本上是一个文本块 金字塔应用程序接收并解析请求，并找到要调用的视图函数来处理请求

view函数做了一些有用的事情，例如，它从数据库查询数据并返回一个Python字典，然后在您的例子中，它将传递给模板引擎Jinja2

模板引擎使用模板a文本blob和view函数返回的数据生成另一个文本blob，该文本blob表示呈现的HTML页面。然后将该blob连同HTTP头等一起发送到浏览器。请注意，对于Pyramid，实际上没有HTML、DOM、JavaScript变量或类似的内容。和任何web应用程序一样，您的金字塔应用程序只是一个接收文本块并生成其他文本块作为响应的程序

浏览器接收服务器响应并对其进行解释——例如，它可能会确定这是一个带有一些内联标记的HTML页面。浏览器然后呈现HTML，加载图像和样式表，执行脚本等

当您单击链接或更改window.location时，让我们暂时忽略各种AJAX场景—当您这样做时，浏览器会放弃当前页面并发送另一个HTTP请求，请参见上文1。然后它等待服务器响应并呈现一个完全没有上一页内存的全新页面。这就是HTTP被称为无状态协议的原因

我的观点是：当你这么做的时候

window.location.href = "http://127.0.0.1:6543/new_device/" + deviceTypeID + "/" + reportTypeID;

这样做毫无意义

$('#reportTypes').val(reportTypeID);//tried to select the previous option but this doesn't seem to work

由于当前页面将被放弃，因此将从服务器发送一个新的文本blob，并呈现为一个新的网页

现在，在这个理论背景之后，您可以看到解决问题的一个选项是向服务器发送一些参数，这会告诉服务器，请仅在预选了这个新reportTypeID的情况下给我相同的页面

看起来您已经可以在视图函数中访问deviceTypeID和reportTypeID。现在，您需要将它们传递到模板，并使用它们在应该预先选择的选项上渲染selected=selected属性。在伪代码中，它看起来像

%for report_type in all_report_types:
    %if report.id == report_type_id:
        <option value="${report_type.id}" selected="selected">${report_type.name}</option>
    %else:
        <option value="${report_type.id}">${report_type.name}</option>
    %endif
%endfor

---

感谢您的深入解释。你在最后展示的例子是我昨天做的，因为我在发布这个问题后不久意识到页面被放弃了，但我仍然遇到ninja2 if语句不起作用并且没有进行预选择的问题，这是因为类型不同。我从不将字典的键转换为字符串，reportTypeID是字符串。

%for report_type in all_report_types:
    %if report.id == report_type_id:
        <option value="${report_type.id}" selected="selected">${report_type.name}</option>
    %else:
        <option value="${report_type.id}">${report_type.name}</option>
    %endif
%endfor