JavaScriptで単純なifステートメントを実行しようとしています。スクリプトは、 でdiv選択されたオプションに基づいての可視性を決定しますselect。
オプションを選択すると、「カスタム」を選択したように動作し、div. しかし、「今月」または「過去の月」を選択すると、 に戻りませんdisplay="none"。興味深いのは、テキスト ボックスの "fromDate" と "toDate" の値が、if ステートメントが正しく実行されたかのように変化することです。彼らが に戻らない理由がわかりませんstyle.display="none"。
<body>
<form name="input" action="mlic_DORReport.cfm?dlFile=1" method="post" style="text-align:center;">
<table align="center">
<tr>
<td>
<h1>Electronic NOS File Generator</h1>
<hr/>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<cfoutput>
<input type="hidden" name="pastFromMonth" id="pastFromMonth" value="#pastFromMonthOp#"/>
<input type="hidden" name="pastEndMonth" id="pastEndMonth" value="#pastEndMonthOp#"/>
<input type="hidden" name="thisFromMonth" id="thisFromMonth" value="#thisFromMonthOp#"/>
<input type="hidden" name="thisEndMonth" id="thisEndMonth" value="#thisEndMonthOp#"/>
</cfoutput>
<div id="customHeader" style="display:none">
<table align="center">
<tr>
<td align="center" style="font-weight:bold;">
Enter dates in "YYYY-MM-DD HH:MM:SS" format
</td>
</tr>
</table>
</div>
<table align="center" cellpadding="1" cellspacing="1" width="65%">
<tr>
<td align="center">
<b>Date Range: </b>
<select name="frombox" id="fromBox" onchange="selectDateRange()">
<option value="Past Month">Past Month</option>
<option value="This Month">This Month</option>
<option value="Custom">Custom</option>
</select>
</td>
</tr>
<tr>
<td>
<div id="customTxtBox" style="display:none">
<cfoutput>
<table align="center">
<tr>
<td align="right">
From:
</td>
<td>
<input type="text" name="fromDate" id="fromDate" mask="YYYY-MM-DD" value="#pastFromMonthOp#"/>
</td>
</tr>
<tr>
<td align="right">
To:
</td>
<td>
<input type="text" name="toDate" id="toDate" mask="YYYY-MM-DD" value="#pastEndMonthOp#"/>
</td>
</tr>
</table>
</cfoutput>
</div>
</td>
</tr>
<tr>
<td align="center">
<b>DMV #: </b>
<select name="txtDmvNumber"/>
<option value="D1111">D1111</option>
<option value="D2222">D2222</option>
<option value="D3333">D3333</option>
<option value="D4444">D4444</option>
<option value="D5555">D5555</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Submit"/>
</td>
</tr>
<tr>
<td>
<div id="customFooter" style="display:none">
<table align="center">
<tr>
<td align="center">
(Note: The HH:MM:SS section of the "From:" date should be
</td>
</tr>
<tr>
<td align="center">
entered 00:00:00 and the "To:" date should be entered 23:59:59)
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
JS
function selectDateRange() {
var fromboxOption = document.getElementById("fromBox").options[document.getElementById("fromBox").selectedIndex].text;
if (fromboxOption == "Past Month") {
document.getElementById("fromDate").value = document.getElementById("pastFromMonth").value;
document.getElementById("toDate").value = document.getElementById("pastEndMonth").value;
document.getElementById("customHeader").style.display = "none";
document.getElementById("customTxtBox").style.display = "none";
document.getElementById("customFooter").style.display = "none";
}
else if (fromboxOption == "This Month") {
document.getElementById("fromDate").value = document.getElementById("thisFromMonth").value;
document.getElementById("toDate").value = document.getElementById("thisEndMonth").value;
document.getElementById("customHeader").style.display = "none";
document.getElementById("customTxtBox").style.display = "none";
document.getElementById("customFooter").style.display = "none";
}
else(fromboxOption == "Custom") {
document.getElementById("customHeader").style.display = "inline";
document.getElementById("customTxtBox").style.display = "inline";
document.getElementById("customFooter").style.display = "inline";
}
}
</body>