jQueryがInternet Explorer 11で動作しない場合<select><option>

Question

更新：この時点で、IE-11で件名を開くことはできますが、閉じることはできません。スパンは、表示を処理するオブジェクトには戻されません。

IEを強制的に使用するときにjQueryで特定のオプションを選択できないのはなぜですか？

SELECTには「科目」（OPTION）のリストがあり、各「科目」には「科目」があります。

これらのすべては、OPTIONのは「.course」「.subject」または

『件名』はクリックされたときに、それが唯一の 『科目』が表示すべきページがロードは、それがアコーディオンなければならないのクラスで設定されていますその「科目」の一部である「科目」をすべて表示するために開きます。同じ「Subject」をクリックすると、「Subject」が閉じるはずです。別の「件名」をクリックすると、すべての「件名」を閉じて、新しくクリックした「件名」を開く必要があります。

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イベントを使用してサポートしていません。