jQuery不能在Internet Explorer 11中處理<select><option>

Question

更新：在這一點上，我可以打開IE-11中的主題，但不能關閉。跨度不會放回對象來處理顯示：無。

爲什麼我不能使用jQuery選擇特定的選項，當我被迫使用IE？

在SELECT中，我有一個'主題'列表（OPTION），在'主題'下有'課程'。

所有這些都是選項的設置有帶班「.subject」或「.course」

頁面加載時應該只顯示‘主體’和‘主題’被點擊時，應該手風琴打開以顯示屬於「主題」的所有「課程」。當點擊相同的「主題」時，應關閉「主題」。如果點擊不同的「主題」，則應關閉所有「主題」，然後打開新點擊的「主題」。

簡化的問題是，由於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'>&nbsp;<button id='add' type='button' style='cursor:default;' title='Add' class='gen_btn'>&nbsp;</button><button id='remove' type='button' style='cursor:default;' title='Remove' class='gen_btn' >&nbsp;</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> 

Answer 1

IE不支持點擊選項，在選擇使用onchange事件。