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

这是关于同一问题的第二个问题，我有一种强烈的感觉，你不能清楚地了解在何时何地发生的事情。我希望我能给你一些链接到＃34;网络如何工作＆＃34;介绍，但不幸的是我不知道。没有冒犯，只是说......

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

浏览器向服务器发送请求，基本上是一个文本blob
Pyramid应用程序接收并解析请求，并找到一个视图函数来调用以处理请求。
view函数做了一些有用的东西，例如它从数据库查询数据并返回一个Python字典，然后Pyramid传递给模板引擎（在你的情况下为Jinja2）
模板引擎使用模板（文本blob）和视图函数返回的数据生成另一个文本blob，它代表渲染的HTML页面。然后将该blob与HTTP标头等一起发送到浏览器。请注意，对于Pyramid，实际上没有HTML，DOM，JavaScript变量或类似的东西。与任何Web应用程序一样，您的Pyramid应用程序只是一个接收文本blob并生成其他文本blob的程序。
浏览器接收服务器响应并解释它 - 例如，它可能会认为这是一个带有内联<script />标记的HTML页面。然后，浏览器呈现HTML，加载图像和样式表，执行脚本等。
您点击链接或更改window.location（暂时忽略各种AJAX方案）的那一刻 - 当您这样做时，浏览器放弃您当前的页面并发送另一个HTTP请求（参见上面的＃1）。然后它等待服务器响应并呈现一个完全没有＆＃34;＆＃34;内存的全新页面。上一页。这就是HTTP被称为＆＃34;无状态协议＆＃34;。

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

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并将其呈现为新的网页。

现在，在这个理论背景之后，您可以看到解决问题的一个选项是将一些参数发送到服务器，告诉它＆＃34;请给我同一页面只有这个新的reportTypeID预选＆＃34;。

您的视图功能似乎已经可以访问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

Answer 2

如果您将参数发送到与 GET请求参数相同的页面并导致页面重新加载，那么您可以使用JavaScript来解析url参数，然后将下拉列表设置为指定值页面加载。

将@BrunoLM指定的函数用于url param解析：How can I get query string values in JavaScript?

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('&'));

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

//$(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”

在window.location重定向之后预先选择html选择选项

2 个答案: