更新：此时我可以打开IE-11中的主题，但不能关闭。跨距不会放回对象以处理显示：无
当我被迫使用IE时，为什么我不能用jQuery选择一个特定的选项？
在SELECT中，我有一个"科目"（OPTION's）列表，每个"科目"下都有"课程"。
所有这些都是OPTION的设置类为".subject"或".curse"
当页面加载时，它应该只显示"主题"，当单击"主题"时，它应手风琴式打开，以显示该"主题"中的所有"课程"。单击同一"主题"时，应关闭"主题"。如果单击其他"主题"，则应关闭所有"主题"然后打开新单击的"主题"。
简化的问题是，由于IE不允许将选项设置为选择器，因此在单击选择选项时使用jQuery访问该选项的最佳方式是什么？
JSFIDDLE
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function showCourses(i) {
//hideCourses();
$('.subject.subject-' + i).addClass('open');
$('.course.subject-' + i).toggleOption(true);
$('.child.subject-' + i).toggleOption(true);
}
// function hideCourses() {
// $('#selectable_box .course').toggleOption(false);
// $('#selectable_box .child').toggleOption(false);
// $('.open').removeClass('open');
// }
// function hideCourses(i) {
// $('#selectable_box .course.subject-' + i).toggleOption(false);
// $('#selectable_box .child.subject-' + i).toggleOption(false);
// $('.open').removeClass('open');
// }
function showSubjects(i) {
var link = '.subject.subject-' + i;
var content = '.subject-' + i;
// hideCourses();
// hideCourses(i);
}
var numSubjects = $('.subject').length;
for(var i = 1; i <= numSubjects; i++) {
showSubjects(i);
}
function Redirect() {
//window.location="https://www.bwreporting.net/index.php?option=com_bwreporting&view=report&Itemid=412&uid={$uid}&zk=11zCfScZtD2ms9LyBZ4UySgYH";
var cus_url ='{$page_url}{$report_details->custom_page_url_1}';
console.log(cus_url);
//window.top.location.href=cus_url;
}
function AddCourses(){
//setTimeout('Redirect()', 500);
var cus_url ='{$page_url}{$report_details->custom_page_url_1}';
window.top.location.href=cus_url;
}
function SelectAllItems() {
var valArray = [];
$("#selected_box option").each(function () {
txtVal = $(this).text();
valArray.push({title:txtVal,loid:$(this).val()});
});
$('#hidden1').val(JSON.stringify(valArray));
}
//Method to handle displaying and not displaying courses when the subjects are clicked.
jQuery.fn.toggleOption = function( show ) {
jQuery( this ).toggle( show );
if( show ) {
if( jQuery( this ).parent( 'span.toggleOption' ).length )
jQuery( this ).unwrap( );
} else {
if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
}
};
//jQuery(selector).toggleOption(true); // show option
//jQuery(selector).toggleOption(false); // hide option
$('#selectable_box option.course').toggleOption(false);
$('#selectable_box option.child').toggleOption(false);
var options = $("#selectable_box :selected");
var lastOption;
var subj_id;
var i;
var open;
var len;
$("#selectable_box").click(function()
{
lastOption = $(this).find(':selected').not(options);
options = $(this).find(':selected');
subj_id = options.attr('class');
end = subj_id.length;
start = end - 4;
open = subj_id.substring(start, end);
if(subj_id != '' || subj_id != 'undefined') {
if(open == 'open') {
$('#selectable_box option.course').toggleOption(false);
$('#selectable_box option.child').toggleOption(false);
$('.open').removeClass('open');
// hideCourses();
}else{
i = subj_id.replace('subject subject-', '');
$('#selectable_box option.course').toggleOption(false);
$('#selectable_box option.child').toggleOption(false);
$('.open').removeClass('open');
showCourses(i);
}
}else{
$('#selectable_box option.course').toggleOption(false);
$('#selectable_box option.child').toggleOption(false);
$('.open').removeClass('open');
}
});
</script>
<form name='submit' id='myFormId' method='post' onsubmit='AddCourses()' enctype='multipart/form-data'>
<div id='main_content'>
<div class='heading-row'>
<div class='heading-right' id='bypassme'><span id='buttonDiv'>
<div id='list' style='width:465px;float:left'>
<div class='header'>Select Courses <span class='small'>(Up to 30)</span></div><select style="width:300px;height : 300px" multiple="multiple" name="selectable_box" id="selectable_box">
<option class="subject subject-1" value="">Subject One</option>
<option data-key="1" subj-id="1" class="course subject-1" value="" style="">Course 1</option>
<option data-key="2" subj-id="1" class="course subject-1" value="" style="">Course 2</option>
<option data-key="3" subj-id="1" class="course subject-1" value="" style="">Course 3</option>
<option data-key="4" subj-id="1" class="course subject-1" value="" style="">Course 4</option>
<option data-key="5" subj-id="1" class="course subject-1" value="" style="">Course 5</option>
<option data-key="6" subj-id="1" class="course subject-1" value="" style="">Course 6</option>
<option data-key="7" subj-id="1" class="course subject-1" value="" style="">Course 7</option>
<option class="subject subject-2" value="">Subject Two</option>
<option data-key="1" subj-id="2" class="course subject-2" value="" style="">Course 1</option>
<option data-key="2" subj-id="2" class="course subject-2" value="" style="">Course 2</option>
<option data-key="3" subj-id="2" class="course subject-2" value="" style="">Course 3</option>
<option data-key="4" subj-id="2" class="course subject-2" value="" style="">Course 4</option>
<option data-key="5" subj-id="2" class="course subject-2" value="" style="">Course 5</option>
<option data-key="6" subj-id="2" class="course subject-2" value="" style="">Course 6</option>
<option data-key="7" subj-id="2" class="course subject-2" value="" style="">Course 7</option>
<option data-key="8" subj-id="2" class="course subject-2" value="" style="">Course 8</option>
<option data-key="9" subj-id="2" class="course subject-2" value="" style="">Course 9</option>
<option data-key="10" subj-id="2" class="course subject-2" value="" style="">Course 10</option>
<option data-key="11" subj-id="2" class="course subject-2" value="" style="">Course 11</option>
<option data-key="12" subj-id="2" class="course subject-2" value="" style="">Course 12</option>
<option data-key="13" subj-id="2" class="course subject-2" value="" style="">Course 13</option>
<option data-key="14" subj-id="2" class="course subject-2" value="" style="">Course 14</option>
<option data-key="15" subj-id="2" class="course subject-2" value="" style="">Course 15</option>
<option class="subject subject-3" value="">Subject Three</option>
<option data-key="1" subj-id="3" class="course subject-3" value="" style="">"Course 1"</option>
<option class="subject subject-4" value="">Subject Four</option>
<option data-key="1" subj-id="4" class="course subject-4" value="" style="">"Course 1"</option>
<option data-key="2" subj-id="4" class="course subject-4" value="" style="">Course 2</option>
<option data-key="3" subj-id="4" class="course subject-4" value="" style="">Course 3</option>
<option data-key="4" subj-id="4" class="course subject-4" value="" style="">Course 4</option>
<option data-key="5" subj-id="4" class="course subject-4" value="" style="">Course 5</option>
<option data-key="6" subj-id="4" class="course subject-4" value="" style="">Course 6</option>
<option data-key="7" subj-id="4" class="course subject-4" value="" style="">Course 7</option>
<option data-key="8" subj-id="4" class="course subject-4" value="" style="">Course 8</option>
<option data-key="9" subj-id="4" class="course subject-4" value="" style="">Course 9</option>
<option data-key="10" subj-id="4" class="course subject-4" value="" style="">Course 10</option>
<option data-key="11" subj-id="4" class="course subject-4" value="" style="">Course 11</option>
<option data-key="12" subj-id="4" class="course subject-4" value="" style="">Course 12</option>
<option data-key="13" subj-id="4" class="course subject-4" value="" style="">Course 13</option>
<option data-key="14" subj-id="4" class="course subject-4" value="" style="">Course 14</option>
<option data-key="15" subj-id="4" class="course subject-4" value="" style="">Course 15</option>
<option data-key="16" subj-id="4" class="course subject-4" value="" style="">Course 16</option>
<option data-key="17" subj-id="4" class="course subject-4" value="" style="">Course 17</option>
<option data-key="18" subj-id="4" class="course subject-4" value="" style="">Course 18</option>
<option data-key="19" subj-id="4" class="course subject-4" value="" style="">Course 19</option>
<option data-key="20" subj-id="4" class="course subject-4" value="" style="">Course 20</option>
<option class="subject subject-5" value="">Subject Five</option>
<option data-key="1" subj-id="5" class="course subject-5" value="" style="">Course 1</option>
<option class="subject subject-6" value="">Subject Six</option>
<option data-key="1" subj-id="6" class="course subject-6" value="" style="">Course 1</option>
<option data-key="2" subj-id="6" class="course subject-6" value="" style="">Course 2</option>
<option data-key="3" subj-id="6" class="course subject-6" value="" style="">Course 3</option>
<option data-key="4" subj-id="6" class="course subject-6" value="" style="">Course 4</option>
<option data-key="5" subj-id="6" class="course subject-6" value="" style="">Course 5</option>
<option data-key="6" subj-id="6" class="course subject-6" value="" style="">Course 6</option>
<option data-key="7" subj-id="6" class="course subject-6" value="" style="">Course 7</option>
<option data-key="8" subj-id="6" class="course subject-6" value="" style="">Course 8</option>
<option data-key="9" subj-id="6" class="course subject-6" value="" style="">Course 9</option>
<option data-key="10" subj-id="6" class="course subject-6" value="" style="">Course 10</option>
<option data-key="11" subj-id="6" class="course subject-6" value="" style="">Course 11</option>
<option data-key="12" subj-id="6" class="course subject-6" value="" style="">Course 12</option>
<option data-key="13" subj-id="6" class="course subject-6" value="" style="">Course 13</option>
<option data-key="14" subj-id="6" class="course subject-6" value="" style="">Course 14</option>
<option class="subject subject-7" value="">Subject Seven</option>
<option data-key="1" subj-id="7" class="course subject-7" value="" style="">Course 1</option>
<option data-key="2" subj-id="7" class="course subject-7" value="" style="">Course 2</option>
<option data-key="3" subj-id="7" class="course subject-7" value="" style="">Course 3</option>
<option data-key="4" subj-id="7" class="course subject-7" value="" style="">Course 4</option>
<option data-key="5" subj-id="7" class="course subject-7" value="" style="">Course 5</option>
<option data-key="6" subj-id="7" class="course subject-7" value="" style="">Course 6</option>
<option data-key="7" subj-id="7" class="course subject-7" value="" style="">Course 7</option>
<option class="subject subject-8" value="">Subject Eight</option>
<option data-key="1" subj-id="8" class="course subject-8" value="" style="">Course 1</option>
<option data-key="2" subj-id="8" class="course subject-8" value="" style="">Course 2</option>
<option data-key="3" subj-id="8" class="course subject-8" value="" style="">Course 3</option>
<option data-key="4" subj-id="8" class="course subject-8" value="" style="">Course 4</option>
<option class="subject subject-9" value="">Subject Nine</option>
<option data-key="1" subj-id="9" class="course subject-9" value="" style="">Course 1</option>
<option data-key="2" subj-id="9" class="course subject-9" value="" style="">Course 2</option>
<option data-key="3" subj-id="9" class="course subject-9" value="" style="">Course 3</option>
<option data-key="4" subj-id="9" class="course subject-9" value="" style="">Course 4</option>
<option class="subject subject-10" value="">Subject Ten</option>
<option class="child subject-10" value="">Child One</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 1</option>
<option class="child subject-10" value="">Child Two</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 2</option>
<option class="child subject-10" value="">Child Three</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 1</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 2</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 3</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 4</option>
<option class="child subject-10" value="">Child Four</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 1</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 2</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 3</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 4</option>
<option class="child subject-10" value="">Child Five</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 1</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 2</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 3</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 4</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 5</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 6</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 7</option>
<option class="child subject-10" value="">Child Six</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 1</option>
<option data-key="1" subj-id="10" class="course subject-10" value="" style="">Course 2</option>
</select>
</div>
<div style='min-width:65px;float:left'> <button id='add' type='button' style='cursor:default;' title='Add' class='gen_btn'> </button><button id='remove' type='button' style='cursor:default;' title='Remove' class='gen_btn' > </button></div>
<div id='list' style='width:465px;float:left'>
<div class='header'>Your Queue <input type='submit' name='submit' class='gen_btn' value='Save Queue & Generate Report' onmouseover='SelectAllItems()'></div>
<select style="width:300px;" multiple="mutiple" name="selected_box" id="selected_box">
</select>
</div>
<div style='margin:50px;width:465px;float:left'><input type='hidden' id='hidden1' name='hidden1[]' value='' /><input type='hidden' id='sneak' name='sneak' value='1' /></div><br style='clear:both;'></span>
</div>
</div>
<div class='cat-list-row'>
<div class='heading-left'>
</div>
</div>
</div>
IE不支持点击选项，请在select上使用onchange事件。