在window.location重定向后预选择html select选项 [英] pre-select html select option after window.location redirect

问题描述

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

I have problem where after the page is redirected, I want the select to have the previously selected option as the selected choice after the page has been redirected.

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

here I have an onchange for my select which will redirect the user depending on their selection(refresh page basically), however after the page refresh the selected option gets reset and the first option in the list get selected.

    $("#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显示页面加载后所显示的选项而无需重置?

How can I get my select to display the chosen option without getting reset after the page load?

推荐答案

这是您针对同一问题的第二个问题，我强烈认为您对何时何地发生的情况一无所知.我希望可以给您链接到一些"Web的工作方式"简介，但是很遗憾，我什么都不知道.没有冒犯，只是说...

This is your second question regarding the same problem and I have a strong feeling you don't have a clear picture of what happens where and when. I wish I could give you a link to some "how the Web works" intro, but unfortunately I don't know any. No offense, just saying...

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

Very briefly, in the context of a Pyramid app, things happen in the following order:

1. 浏览器向服务器发送请求，基本上是一小段文本

2. 金字塔应用程序接收并解析该请求，并找到一个 view函数来调用以处理该请求.

1. Browser sends a request to the server, which is basically a blob of text

2. Pyramid application receives and parses the request, and finds a view function to invoke to handle the request.

view函数会做一些有用的事情，例如它从数据库查询数据并返回一个Python字典，然后Pyramid将该字典传递给 template engine (在您的情况下为Jinja2)

The view function does some useful stuff, for example it queries data from database and returns a Python dictionary, which Pyramid then passes to the template engine (Jinja2 in your case)

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

Template engine uses a template (a text blob) and the data returned by your view function to generate another text blob, which represents your rendered HTML page. That blob is then sent to the browser, along with HTTP headers etc. Note that for Pyramid there's actually no HTML, DOM, JavaScript variables or anything like that. Like any web application, your Pyramid app is just a program to receive text blobs and generate other text blobs in response.

浏览器收到服务器响应并对其进行解释-例如，它可能会确定这是带有某些内嵌<script />标记的HTML页面.然后，浏览器呈现HTML，加载图像和样式表，执行脚本等.

Browser receives the server response and interprets it - for example, it may decide that this is an HTML page with some inline <script /> tags. The browser then renders the HTML, loads images and stylesheets, executes scripts etc.

单击链接或更改window.location的那一刻(此刻暂时忽略各种AJAX场景)-执行此操作时，浏览器放弃当前页面并发送另一个HTTP请求(请参见上面的#1).然后，它等待服务器响应并呈现一个全新的页面，该页面完全没有上一页的内存".这就是为什么HTTP被称为无状态协议"的原因.

The moment you click on a link or change window.location (let's ignore various AJAX scenarios for the moment) - the moment you do that, the browser abandons your current page and sends another HTTP request (see #1 above). It then waits for the server response and render a completely new page which has absolutely no "memory of" the previous page. This is why HTTP is called "stateless protocol".

我的意思是:当你这样做

My point is: the moment you do

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

because the current page is going to be abandoned, a new text blob will be sent from the server and rendered as a new web page.

现在，在此理论背景之后，您可以看到解决问题的一种方法是将一些 parameter 发送到服务器，这将告诉服务器请仅给我同一页并预先选择了这个新的reportTypeID".

Now, after this theoretical background, you can see that one of the options to solve your problem would be to send some parameter to the server which would tell it "please give me the same page only with this new reportTypeID pre-selected".

看起来您已经可以在视图功能中访问deviceTypeID和reportTypeID.现在，您需要将它们传递给模板，并使用它们来呈现应预先选择的选项上的selected="selected"属性.用伪代码看起来像

It looks like you already have access to deviceTypeID and reportTypeID in your view function. Now you need to pass them to the template and use them to render selected="selected" attribute on the option which should be pre-selected. In pseudocode it would look something like

%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

这篇关于在window.location重定向后预选择html select选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！