javascript - 在 window.location 重定向后预选 html 选择选项

Question

我在页面重定向后遇到问题，我希望 select 在页面重定向后将先前选择的选项作为选定的选项。

这里我有一个 onchange 用于我的选择，它将根据用户的选择重定向用户(基本上是刷新页面)，但是在页面刷新后，所选选项被重置并且列表中的第一个选项被选中。

    $("#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 显示所选选项而不在页面加载后重置？

Answer 1

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

非常简单，在 Pyramid 应用程序的上下文中，事情按以下顺序发生:

1. 浏览器向服务器发送请求，这基本上是一个文本 block

2. Pyramid 应用程序接收并解析请求，并找到一个 View 函数 来调用以处理请求。

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

4. 模板引擎使用模板(文本 blob)和 View 函数返回的数据来生成另一个文本 blob，代表呈现的 HTML 页面。然后将该 blob 与 HTTP header 等一起发送到浏览器。请注意，对于 Pyramid，实际上没有 HTML、DOM、JavaScript 变量或类似的东西。与任何 Web 应用程序一样，您的 Pyramid 应用程序只是一个程序，用于接收文本 blob 并生成其他文本 blob 作为响应。

5. 浏览器接收服务器响应并解释 - 例如，它可能决定这是一个带有一些内联 <script /> 的 HTML 页面标签。然后浏览器呈现 HTML、加载图像和样式表、执行脚本等。

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

我的观点是:你做的那一刻

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在您的 View 功能中。现在您需要将它们传递给模板并使用它们来呈现 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