在提交后将表单值保存在下拉列表中

Question

我有jquery的这一部分

function retainDropDownValue(){
    var e = document.getElementById("type");
    var savedValue = e.options[e.selectedIndex].value;
    console.log("DEBUGTEST");
}

以捕获下拉列表本身的值。我希望这样，在用户单击"submit“之后，下拉列表将保留用户选择的下拉列表中的行为和最后选项。

<form action="{{URL_ROOT}}/run/search/" method="post"  id="TypeForm" onsubmit="retainDropDownValue();"  >

<select id="type" onchange="retainDropDownValue();fctCheck(this.value);" style="font-size: 25px;">
    <option value="">Select</option>
    <option value="first_selection">First</option>
   <option value="second_selection">Second</option>
</select>

Term: <input type="text" name="query" size="10" style="font-size: 25px; direction: rtl;" value="{{ query }}"> &nbsp;&nbsp;&nbsp;

<input type="submit" value="Search" onsubmit="submitForm();"> 

这是submitForm函数

function submitForm(){
    $("#TypeForm").submit();    
}

所发生的是它将提交和保留文本字段，但下拉菜单将重置为“选择”和‘DEBUGTEST’在控制台中只闪烁，直到提交完成。然后就消失了。

我如何使它，使当我点击“搜索”按钮(或type=submit按钮)，它保留的值"first_selection“，而不是重置回”选择“？

Answer 1

首先，您是否再次提交要刷新的页面？如果是这样的话，您可以使用ajax提交表单，因此没有丢失表单选择。

看起来，当retainDropDownValue()在提交后执行时，它已经丢失了提交的值。

1. 使用页面级别的变量在提交屏幕之前存储$('#type').val()，并在提交调用或onload之后设置
2. 使用ajax提交表单$.ajax({ url: form.attr('action')，数据类型：‘json’，异步:false，data: form.serialize()，类型:form.attr(‘方法’)，成功:函数(数据){}；