admin管理员组文章数量:1290941
NO JQUERY! I want to be able to refresh the page and have the values of my dropdown reset to the blank(first option). But if I go to the page fill something out and refresh the page, it keeps the text of the option that was previously in the drop down. Does anyone know how to achieve this??
Here is the dropdown I'm using. If you would like to see all of the code I can post it.
<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>
Here is all of the code...
<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>
NO JQUERY! I want to be able to refresh the page and have the values of my dropdown reset to the blank(first option). But if I go to the page fill something out and refresh the page, it keeps the text of the option that was previously in the drop down. Does anyone know how to achieve this??
Here is the dropdown I'm using. If you would like to see all of the code I can post it.
<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>
Here is all of the code...
<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>
- are you using JQuery or just plain js? – FedeX Commented Aug 24, 2012 at 15:18
5 Answers
Reset to default 4Try this:
<body onLoad="document.getElementById('leave').options[0].selected = 'selected';">
Here is solution without using javascript hacks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<select autoplete="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>
Edit
Made some testing and added reload button to test that if page is reloaded with javascript or anything which is triggered from your code - it works with every browser I tested so far. (Value is set to default). With IE it seems that it has its own way to handle caching so plain F5 doesn't work like with other browsers(so typical to IE) - however solution I provided tends to work well for mon web development where page is either refreshed by js, navigation or form sending etc. (basic user actions at web page.)
Not sure if I understand, but try with simple:
<option value="0" SELECTED></option>
Just loop by the elements and reset them:
<!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>
Replace myform with the name of your form her:
Window.onload = function(){
Myform.reset();
}
Regards
本文标签： javascriptResetting values when refreshing pageStack Overflow
版权声明：本文标题：javascript - Resetting values when refreshing page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741524484a2383384.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论