刷新页面时重置值
Posted
技术标签:
【中文标题】刷新页面时重置值【英文标题】：Resetting values when refreshing page 【发布时间】：2012-08-20 04:16:55 【问题描述】：没有查询！我希望能够刷新页面并将下拉列表的值重置为空白（第一个选项）。但是，如果我去页面填写一些内容并刷新页面，它会保留以前在下拉列表中的选项文本。有谁知道如何做到这一点？？
这是我正在使用的下拉菜单。如果您想查看所有代码，我可以发布它。
<select style="float:left;" id="leave" onchange="changeMessage(this);">
<option value="0"></option>
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="35">Retire</option>
<option value="15">Military Leave</option>
<option value="25">Medical Leave</option>
</select>
这里是所有的代码...
<html>
<head>
<title>Life Event Picker Calendar</title>
<script>
function changeMessage(oElement)
var rd1 = document.getElementById("rd1");
var rd1Text = rd1.parentNode.getElementsByTagName('span')[0];
var rd2 = document.getElementById("rd2");
var rd2Text = rd2.parentNode.getElementsByTagName('span')[0];
document.getElementById("message1").innerHTML = "";
document.getElementById("message2").innerHTML = "";
document.getElementById("message3").innerHTML = "";
document.getElementById("message4").innerHTML = "";
document.getElementById("message5").innerHTML = "";
rd1.checked = false;
rd2.checked = false;
//nothing
if (oElement.value == "0")
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Date";
//have a baby
else if (oElement.value == "100")
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.clear = "both";
document.getElementById("radio").style.display = "inline-block";
rd1Text.innerHTML = "C-Section";
rd2Text.innerHTML = "Regular Birth";
rd1.value = "C-Section";
rd2.value = "Regular Birth";
document.getElementById("day").innerHTML = "Anticipated Due Date";
//military leave
else if (oElement.value == "15")
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.clear = "both";
document.getElementById("radio").style.display = "inline-block";
rd1Text.innerHTML = "Training";
rd2Text.innerHTML = "Active Duty";
rd1.value = "Training";
rd2.value = "Active Duty";
document.getElementById("day").innerHTML = "Anticipated Leave Date";
//get married
else if (oElement.value == "5")
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Marriage Date";
//adopt a child
else if (oElement.value == "90")
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Anticipated Adoption Date";
//retire
else if (oElement.value == "35")
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Anticipated Retirement Date";
//medical leave
else if (oElement.value == "25")
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Anticipated Disability Date";
else
return;
function showChoice(input)
document.getElementById("btn").style.display = "inline-block";
//gets info picked and displays messages
function getInfo()
var myDate=new Date();
var ev_num = parseInt(document.getElementById("leave").value)
myDate.setFullYear(sel_year.value,sel_month.value,sel_day.value);
var event_value = document.getElementById("leave").value;
//get married
if (event_value == 5)
var first_number = new Date(myDate);
first_number.setDate(myDate.getDate() + 31);
document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Get Married' Life Event.";
document.getElementById("message2").innerHTML = "";
document.getElementById("message3").innerHTML = "";
document.getElementById("message4").innerHTML = "";
document.getElementById("message5").innerHTML = "";
//have a baby
else if (event_value == 100)
var first_number = new Date(myDate);
first_number.setDate(myDate.getDate() + 31);
var second_number = new Date(myDate);
second_number.setDate(myDate.getDate() - 30);
var third_number = new Date(myDate);
third_number.setDate(myDate.getDate() + 7);
document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Have a Baby' Life Event.";
document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>" + "1) Call 1-877-968-7762 to initiate your leave. <br/>" + "2) Complete Authorization Release Form.";
document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Contact a Leave Specialist at the HR Service Center to request paid days if not enough Occasional Absence days.";
var fourth_number;
var fifth_number1;
var fifth_number2;
//C Section
if ((document.getElementById("rd1").checked) == true)
fourth_number = new Date(myDate);
fourth_number.setDate(myDate.getDate() + 56);
fifth_number1 = new Date(myDate);
fifth_number1.setDate(myDate.getDate() + 57);
fifth_number2 = new Date(myDate);
fifth_number2.setDate(myDate.getDate() + 91);
document.getElementById("message4").innerHTML = myDate + " up to " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>2) Checkpoint to determine return to work date.";
document.getElementById("message5").innerHTML = fifth_number1 + " up to " + fifth_number2 + "<br/>1) Paid time off is up to five paid days.<br/>2) FML job protection is up to 13 weeks.<br/>3) Benefit bill sent once STD ends.";
//Regular Birth
else
fourth_number = new Date(myDate);
fourth_number.setDate(myDate.getDate() + 42);
fifth_number1 = new Date(myDate);
fifth_number1.setDate(myDate.getDate() + 43);
fifth_number2 = new Date(myDate);
fifth_number2.setDate(myDate.getDate() + 91);
document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>Checkpoint to determine return to work date.";
document.getElementById("message5").innerHTML = fifth_number1 + " up to " + fifth_number2 + "<br/>1) Paid time off is up to five paid days.<br/>2) FML job protection is up to 13 weeks.<br/>3) Benefit bill sent once STD ends.";
//adopt a child
else if (event_value == 90)
var first_number = new Date(myDate);
first_number.setDate(myDate.getDate() + 31);
var second_number = new Date(myDate);
second_number.setDate(myDate.getDate() - 30);
var third_number = new Date(myDate);
third_number.setDate(myDate.getDate() + 91);
document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Have a Child' Life Event.";
document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>" + "Call 1-877-968-7762 to initiate your leave.";
document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>1) Adoption time off is up to 10 paid days.<br/>2) FML job protection up to 13 weeks.";
document.getElementById("message4").innerHTML = "";
document.getElementById("message5").innerHTML = "";
//retire
else if (event_value == 35)
var second_number = new Date(myDate);
second_number.setDate(myDate.getDate() - 90);
var third_number = new Date(myDate);
third_number.setDate(myDate.getDate() + 30);
var fourth_number = new Date(myDate);
fourth_number.setDate(myDate.getDate() + 60);
document.getElementById("message1").innerHTML = "";
document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>Call 1-877-968-7762 to initiate your retirement.<br/>2) Make Pension election/return form.<br/>3) Review Savings/401(k) Options.<br/>4) View Medical Options.<br/>5) Review/Confirm beneficiaries.";
document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Enroll in Medical Plan Options if applicable.";
document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Enroll in COBRA<br/>2) Payoff any 401(k) loans.";
document.getElementById("message5").innerHTML = "";
//military leave
else if (event_value == 15)
var second_number = new Date(myDate);
second_number.setDate(myDate.getDate() - 30);
var third_number
var fourth_number;
document.getElementById("message1").innerHTML = "";
document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>Call 1-877-968-7762 to initiate your leave.";
document.getElementById("message5").innerHTML = "";
//Training Leave
if ((document.getElementById("rd1").checked) == true)
third_number = new Date(myDate);
third_number.setDate(myDate.getDate() + 14);
fourth_number = new Date(myDate);
fourth_number.setDate(myDate.getDate() + 15);
document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>You are eligible to receive 100% pay.";
document.getElementById("message4").innerHTML = "After " + fourth_number + "<br/>Your leave will be unpaid.";
//Active Duty
else
third_number = new Date(myDate);
third_number.setDate(myDate.getDate() + 365);
document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>You are eligible to receive 50% pay.";
document.getElementById("message4").innerHTML = "After " + third_number + "<br/>Your leave will be unpaid.";
//medical leave
else if (event_value == 25)
var first_number = new Date(myDate);
first_number.setDate(myDate.getDate() + 31);
var second_number = new Date(myDate);
second_number.setDate(myDate.getDate() - 30);
var third_number = new Date(myDate);
third_number.setDate(myDate.getDate() + 7);
var fourth_number = new Date(myDate);
fourth_number.setDate(myDate.getDate() + 91);
document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>You are eligible to update coverage and personal information through your 'Take Medical Leave' Life Event.";
document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>1) Call 1-877-968-7762 to initiate your leave. <br/>2) Complete Authorization Release Form.";
document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Contact a Leave Specialist at the HR Service Center to request paid days if not enough Occasional Absence days.";
document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>2) Checkpoint to determine return to work date.";
document.getElementById("message5").innerHTML = "After " + fourth_number + "<br/>Contact will be made to initiate the LTD application process prior to 92nd day.";
else
</script>
</head>
<body>
Life Event Picker Calendar<br>
<hr align="left" />
<div id="life" style="float:left;">Life Event</div><div id="day" style="display:float:left; margin-left:120px;">Date</div>
<select style="float:left;" id="leave" onchange="changeMessage(this);">
<option selected="selected"value="0"></option>
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="35">Retire</option>
<option value="15">Military Leave</option>
<option value="25">Medical Leave</option>
</select>
<div id="calendar-container" style="float:left;" ></div>
<button id="btn" style="display:none;" onclick="getInfo()"type="button">Process</button>
<br>
<div id="radio" style="display:none">
<label><span></span><input type="radio" name="radio" id="rd1" value="" onclick="showChoice(this)"/></label>
<label><span></span><input type="radio" name="radio" id="rd2" value="" onclick="showChoice(this)"/></label>
</div>
<br>
<div id="date"></div>
<div id="event"></div>
<div id="return"></div>
<div id="yourdate"></div>
<div id="message1"></div><br>
<div id="message2"></div><br>
<div id="message3"></div><br>
<div id="message4"></div><br>
<div id="message5"></div>
<script type="text/javascript">
//creates the element variables for the drop downs
//need to be up here for getInfo() to work
var sel_year = document.createElement('select'),
sel_month = document.createElement('select'),
sel_day = document.createElement('select');
//function that creates id calendar-container
(function()
//variables and values for years
var yr1 = 2011,
yr2 = 2012,
yr3 = 2013,
yr4 = 2014;
var years = [yr1, yr2, yr3, yr4];
//array with months and associated days
var calendar = [
["January", 31], ["February", 28], ["March", 31], ["April", 30], ["May", 31], ["June", 30], ["July", 31], ["August", 31], ["September", 30],
["October", 31], ["November", 30], ["December", 31]],
//this is the variable that accesses the content
cont = document.getElementById('calendar-container');
//creates year/month/day options and sets their values (month value is -1 for date calculation)
function createOption(txt, val)
var option = document.createElement('option');
option.value = val;
option.appendChild(document.createTextNode(txt));
return option;
//this clears any elements for days, months, years
function clearChildren(ele)
while (ele.hasChildNodes())
ele.removeChild(ele.lastChild);
//this function is triggered when you change the year or month
function recalculateDays()
var year_index = sel_year.value;
var month_index = sel_month.value,
df = document.createDocumentFragment();
if ((month_index == 1) && (year_index % 4 == 0))
for (var i = 0, l = calendar[month_index][1]; i < l + 1; i++)
//the first variable is what number will be displayed in the day drop down
df.appendChild(createOption(i + 1, i + 1));
else
//l is the variable for the number of days in the month from the array above ex:28, 30, 31
for (var i = 0, l = calendar[month_index][1]; i < l; i++)
//the first variable is what number will be displayed in the day drop down
df.appendChild(createOption(i + 1, i + 1));
clearChildren(sel_day);
sel_day.appendChild(df);
//this creates the month values
function generateMonths()
var df = document.createDocumentFragment();
for (var i = 0; i < calendar.length; i++)
df.appendChild(createOption(calendar[i][0], i));
//clears past months
clearChildren(sel_month);
//appends new months onto variable df
sel_month.appendChild(df);
//this creates the year values
function generateYears()
var df = document.createDocumentFragment();
for (var i = 0; i < years.length; i++)
df.appendChild(createOption(years[i], years[i]));
//clears past months
clearChildren(sel_year);
//appends new months onto variable df
sel_year.appendChild(df);
//anytime the month/year selector is changed this calls the function to change the days
sel_month.onchange = recalculateDays;
sel_year.onchange = recalculateDays;
//runs the months and days functions
generateYears();
generateMonths();
recalculateDays();
//this is what displays each of the individual drop downs after everything has been done to them
cont.appendChild(sel_year);
cont.appendChild(sel_month);
cont.appendChild(sel_day);
());
</script>
</body>
</html>
【问题讨论】：
你使用的是 JQuery 还是纯 js？ 【参考方案1】：试试这个：
<body onLoad="document.getElementById('leave').options[0].selected = 'selected';">
【讨论】：
【参考方案2】：这是不使用 javascript hacks 的解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<select autocomplete="off">
<option value="0" selected="selected"></option>
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="35">Retire</option>
<option value="15">Military Leave</option>
<option value="25">Medical Leave</option>
</select>
<br /><br />
<button id="btn" onclick="javascript:location.reload(true)" type="button">Test page reloading</button>
</body>
</html>
编辑
进行了一些测试并添加了重新加载按钮来测试页面是否使用 javascript 或任何从您的代码触发的内容重新加载 - 它适用于我迄今为止测试的每个浏览器。 （值设置为默认值）。使用 IE，它似乎有自己的方式来处理缓存，所以普通的 F5 不像其他浏览器那样工作（对于 IE 来说很典型） - 但是我提供的解决方案往往适用于页面由 js 刷新的常见 Web 开发、导航或表单发送等（网页上的基本用户操作。）
【讨论】：
是的，当我测试时它工作正常，所以问题一定是在您的代码中我们看不到的其他地方？ 我刚发了..难道是我的js在这部分之前？？ 是的，似乎 autocomplete="off" 用我提供的那些标题正确解决了它。 :) 保留该值的先前功能是因为（至少）firefox 处理数据缓存的方式。提示：为您的 html 文档添加标题@Joe Ingel 由于某种原因仍然无法正常工作..我不知道为什么，但感谢您的帮助..body onload 解决方案工作正常。 @Joe Ingel 是的，你一定已经用 IE 进行了测试 - 似乎它有自己的缓存控制，可以根据用户配置浏览器的方式而有所不同 - 这有点 IMO 的事情，但我认为我的解决方案适用于常见的 Web 开发，因为页面通常是通过浏览链接或使用 javascript 加载的 - 在这些情况下，我的代码可以根据需要运行，并且不需要根据每个视图选择进行临时 js 编码 x ）但很高兴你有一些工作，只是想指出！干杯。 :)【参考方案3】：不确定我是否理解，但尝试简单：
<option value="0" SELECTED></option>
【讨论】：
为了更好的浏览器支持使用最小化代码：选择而不是 selected="selected"【参考方案4】：只需循环元素并重置它们：
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function resetSelect(element)
var reset = parseInt(element.dataset.reset, 10);
element.selectedIndex = isNaN(reset) ? 0 : reset;
function resetSelects()
var els = document.getElementsByClassName('reset') || [];
for (var i = els.length; i--;)
if (els[i] && els[i].options)
resetSelect(els[i]);
window.onload = function()
resetSelects();
;
</script>
</head>
<body>
<select class='reset' data-reset='0' style="float:left;" id="leave" onchange="changeMessage(this);">
<option value="0"></option>
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="35">Retire</option>
<option value="15">Military Leave</option>
<option value="25">Medical Leave</option>
</select>
</body>
</html>
【讨论】：
【参考方案5】：将 myform 替换为她的表单名称：
Window.onload = function()
Myform.reset();
问候
【讨论】：
以上是关于刷新页面时重置值的主要内容，如果未能解决你的问题，请参考以下文章