没有意思！我希望能够刷新页面并将我的下拉列表的值重置为空白（第一个选项）。但是，如果我转到页面填充并刷新页面，它会保留以前在下拉列表中的选项文本。有谁知道如何实现这个？
这是我正在使用的下拉列表。如果您想查看我可以发布的所有代码。
<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" width="200px"/>
<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>
答案 0 :(得分：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很典型） - 但是我提供的解决方案往往适用于常见的Web开发，其中页面由js刷新，导航或表格发送等（网页上的基本用户操作。）
答案 1 :(得分：2)
试试这个：
<body onLoad="document.getElementById('leave').options[0].selected = 'selected';">
答案 2 :(得分：1)
不确定我是否理解，但尝试简单：
<option value="0" SELECTED></option>
答案 3 :(得分：0)
按元素循环并重置它们：
<!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>
答案 4 :(得分：0)
将myform替换为您的表单名称：
Window.onload = function(){
Myform.reset();
}
致谢