在window.location重定向之后预先选择html选择选项
我有问题，在重定向页面后，我希望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显示所选选项而不在页面加载后重置？
这是关于同样问题的第二个问题，我强烈感觉你没有清楚地知道在何时何地发生的事情。 我希望我能给你链接一些“网络如何工作”的介绍，但不幸的是我不知道。 没有冒犯，只是说……
非常简单，在Pyramid应用程序的上下文中，事情按以下顺序发生：
- 浏览器向服务器发送请求，该请求基本上是一团文本
-
Pyramid应用程序接收并解析请求，并找到要调用以处理请求的视图函数 。
-
视图函数做了一些有用的东西，例如它从数据库查询数据并返回一个Python字典，然后Pyramid传递给模板引擎 （在你的情况下为Jinja2）
-
模板引擎使用模板（文本blob）和视图函数返回的数据生成另一个文本blob，它代表渲染的HTML页面。 然后将该blob与HTTP标头等一起发送到浏览器。请注意，对于Pyramid，实际上没有HTML，DOM，JavaScript变量或类似的东西。 与任何Web应用程序一样，您的Pyramid应用程序只是一个接收文本blob并生成其他文本blob的程序。
-
浏览器接收服务器响应并对其进行解释 – 例如，它可能会确定这是一个带有内联
标记的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: %else: %endif %endfor
如果要将参数发送到与GET请求参数相同的页面并导致页面重新加载，则可以使用JavaScript解析url参数，然后在页面加载时将下拉列表设置为指定值。
将@BrunoLM指定的函数用于url param解析： 如何在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”