我正在尝试创建一个JSFiddle来显示我在IE11中遇到的问题，但是当我在IE11中设置JSFiddle时，它甚至没有显示我在选择报告时弹出的字段。有人可以帮助我让这个JSFiddle正常工作吗？
我遇到的真正问题是当我点击提交按钮并且如果我点击添加全部按钮并且在IE11中点击提交时未选择我的选择它不计入被选中但仍然想要从选择中选择。这仅适用于IE11，适用于FireFox和Chrome。由于我的办公室只允许用IE编写程序，所以对此有任何帮助都会非常感激:(
https://jsfiddle.net/bobrierton/b1bds5h1/
<table border="0" cellpadding="0" cellspacing="15" style="width: 600px">
<tr>
<td><span class="srch_title" for="reporttype">Please select a report:</span>
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
<option id ="locationreports" value="locationreports" >Location Stats</option>
</select>
</td>
</tr>
</table>
<form name="generatereport" method="post">
<table border="0" cellpadding="0" cellspacing="15" style="width: 600px">
<tr>
<td id="location" style="display: none;">
<select name="Location" id="loc" multiple="multiple" size="9">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
</td>
<td id="locationbtns" style="display: none;">
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
</td>
<td id="locationtextarea" style="display: none;">
<textarea id="selected" rows="9" readonly></textarea>
</td>
</tr>
<tr>
<td id="employeelist" style="display: none;">
<select name="EmployeeName" id="EmployeeName" multiple="multiple" size="9">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<!---<cfquery name="GetActiveEmps" datasource="tco_associates">
SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
WHERE assoc_status = 'ACTIVE'
and assoc_last NOT LIKE 'Test%'
and len(assoc_last) > 0
ORDER BY assoc_last
</cfquery>
<select name="EmployeeName" id="EmployeeName" multiple="multiple" size="9">
<cfoutput query="GetActiveEmps">
<option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
</cfoutput>
</select>--->
</td>
<td id="employeelistbtns" style="display: none;">
<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>
</td>
<td id="employeelisttextarea" style="display: none;">
<textarea id="selected1" rows="9" readonly></textarea>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="15" style="width: 600px">
<tr>
<td id="chosendates" style="display: none;">
<span class="srch_title" for="StartDate">From:</span>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<span class="srch_title" for="EndDate">To:</span>
<input type='text' name="EndDate" id="EndDate" value="" required/>
</td>
</tr>
<tr>
<td id="formattype" style="display: none;">
<span class="srch_title" for="Format">Format:</span>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
</td>
</tr>
<tr>
<td id="submitbtn" style="display: none;">
<input type="button" onclick="javascript:window.location='index.cfm?content=reports';" value="Cancel" />
<input type="submit" name="submit" value="Continue" />
</td>
</tr>
</table>
function resetDatePickers(){
var today = new Date();
var weekAgo = new Date();
var $from = $("#StartDate");
var $to = $("#EndDate");
weekAgo.setDate(today.getDate() - 7);
$from.datepicker({
changeMonth: true,
maxDate: today,
onSelect: function(dateText) {
$to.datepicker("option", "minDate", dateText);
}
}).datepicker('setDate', weekAgo);
$to.datepicker({
changeMonth: true,
maxDate: today,
minDate: weekAgo,
onSelect: function(dateText) {
$from.datepicker("option", "maxDate", dateText);
}
}).datepicker('setDate', today);
}
$(document).on('change', '#reporttype', function() {
var value = $(this).val();
var location = $("#location");
var loc = $("#loc");
var employeelist = $("#employeelist");
var chosendates = $("#chosendates");
var formattype = $("#formattype");
var submitbtn = $("#submitbtn");
var locationbtns = $("#locationbtns");
var locationtextarea = $("#locationtextarea");
var EmployeeName = $("#EmployeeName");
var employeelistbtns = $("#employeelistbtns");
var employeelisttextarea = $("#employeelisttextarea");
var generatereportform = $("form[name=generatereport]");
if (value === "checklistreports") {
generatereportform[0].reset();
location.show();
locationbtns.show();
locationtextarea.show();
loc.prop('required',true);
employeelistbtns.show();
employeelisttextarea.show();
employeelist.show();
chosendates.show();
formattype.show();
submitbtn.show();
generatereportform.attr("action", "index.cfm?content=reportsassociate");
EmployeeName.prop('required',true);
} else if (value === "locationreports") {
generatereportform[0].reset();
location.show();
locationbtns.show();
locationtextarea.show();
loc.prop('required',true);
employeelistbtns.hide();
employeelisttextarea.hide();
employeelist.hide();
chosendates.show();
formattype.show();
submitbtn.show();
generatereportform.attr("action", "index.cfm?content=reportslocation");
EmployeeName.prop('required',false);
} else {
generatereportform[0].reset();
location.hide();
locationbtns.hide();
locationtextarea.hide();
loc.prop('required',false);
employeelistbtns.hide();
employeelisttextarea.hide();
employeelist.hide();
chosendates.hide();
formattype.hide();
submitbtn.hide();
generatereportform.attr("action", "#");
EmployeeName.prop('required',false);
}
resetDatePickers()
});
// JS for Showing Chosen Locations in textarea
// Listens to the changes in #loc. Prepares the selected elements, and sets the result in
// #selected.
$("#loc").change(function() {
var selected = [];
$(this).find("option:selected").each(function() {
selected.push($(this).text());
});
$("#selected").val(selected.join("\n"));
});
// Selects all the options, and manually triggers the change() of #loc
$("#add").click(function() {
var loc = $("#loc");
loc.find("option").prop("selected", true);
loc.change();
});
// Deselects all the options, and manually triggers the change() of #loc
$("#rem").click(function() {
var loc = $("#loc");
loc.find("option").prop("selected", false);
loc.change();
});
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
// Listens to the changes in #EmployeeName. Prepares the selected elements, and sets the
// result in #selected1.
$("#EmployeeName").change(function() {
var selected = [];
$(this).find("option:selected").each(function() {
selected.push($(this).text());
});
$("#selected1").val(selected.join("\n"));
});
// Selects all the options, and manually triggers the change() of #EmployeeName
$("#add1").click(function() {
var emps = $("#EmployeeName");
emps.find("option").prop("selected", true);
emps.change();
});
// Deselects all the options, and manually triggers the change() of #EmployeeName
$("#rem1").click(function() {
var emps = $("#EmployeeName");
emps.find("option").prop("selected", false);
emps.change();
});
// End JS for Showing Chosen Associates in textarea