I have a <select multiple="multiple"> list that is loaded by javascript code dynamically based on an array. In IE9, and IE10, this code works fine. However, in IE11, the select box never widens, and the options are not selectable, though, in the real narrow window, you can see the beginning of some text where the options are supposed to be populating.
The only work around we've found so far has been to ask users to place our site into their "compatibility view" site.
Among the many things I have tried:
- I have tried forcing compability mode via the various meta tags, however, this has not been adequate to resolve the issue.
- I have tried moving the code blocks that execute as the page loads into $(document).ready blocks.
- I have tried various DocType options
Below is a stripped down, sanitized working example of the code I am trying to use. There are two multi-selects that are populated normally - by html - and of course they work just fine. Then, there are two multi-selects that are populated dynamically, from the array _xll0. The first of these, when used in IE, shows this broken behavior. The second, for whatever reason, kind of works.
What is going on with IE11 that this happens?? How do I fix??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><title></title><META http-equiv="Expires" content="0"><META http-equiv="CACHE-CONTROL" content="NO-CACHE"><META http-equiv="PRAGMA" content="NO-CACHE"><META HTTP-EQUIV="Expires" CONTENT="-1"></HEAD><body bgColor="#ffffff" onload="" style="margin:0;padding:0" ><form name="Form1" method="post" action="" id="Form1"><script>
function _jxcsMulSelClientArrayMerge(a,b) {
var mapp = new Array();
var res = new Array();
var othercase_2 = null;
for (var i in a){
mapp[a[i][0]]='ok';
}
for (var i in b){
if(mapp[b[i][0]]==null){
res.push(b[i]);
}
}
for (var i in a){
if (a[i][0]!=-2) {
res.push(a[i]);
}
else {
othercase_2=a[i];
}
}
res.sort(_jxcsMulSelClientSortFunc);
if (othercase_2!=null)res.push(othercase_2);
return res;
}
function _jxcsMulSelClientSortFunc(a,b){
if (a[1]<b[1]) return -1;
if (a[1]>b[1]) return 1;
return 0;
}</script><script>
function _jxcsMselFunc_regiondiv_235_RegionID(){
var _xll0=[
['4','0______A_______',[['1','DIVISION 1',[]]]],
['5','0______B_______',[['1','DIVISION 1',[]]]],
['10','0______C_______',[['1','DIVISION 1',[]]]],
['14','0______D_______',[['1','DIVISION 1',[]]]],
['17','0______E_______',[['1','DIVISION 1',[]]]],
['20','0______F_______',[['1','DIVISION 1',[]]]],
['21','0______G_______',[['1','DIVISION 1',[]]]],
['26','0______H_______',[['1','DIVISION 1',[]]]],
['6','0______I_______',[['2','DIVISION 2',[]]]],
['1','0______J_______',[['3','DIVISION 3',[]]]],
['2','0______K_______',[['3','DIVISION 3',[]]]],
['3','0______L_______',[['3','DIVISION 3',[]]]],
['8','0______M_______',[['3','DIVISION 3',[]]]],
['9','0______N_______',[['3','DIVISION 3',[]]]],
['24','0______O_______',[['3','DIVISION 3',[]]]],
['28','0______P_______',[['3','DIVISION 3',[]]]],
['29','0______Q_______',[['3','DIVISION 3',[]]]],
['30','0______R_______',[['3','DIVISION 3',[]]]],
['13','0______S_______',[['4','DIVISION 4',[]]]],
['15','0______T_______',[['4','DIVISION 4',[]]]],
['18','0______U_______',[['4','DIVISION 4',[]]]],
['19','0______V_______',[['4','DIVISION 4',[]]]],
['23','0______W_______',[['4','DIVISION 4',[]]]],
['32','0______X_______',[['4','DIVISION 4',[]]]],
['7','0______Y_______',[['5','DIVISION 5',[]]]],
['22','0______Z_______',[['5','DIVISION 5',[]]]],
['35','1______A_______',[['5','DIVISION 5',[]]]],
['11','1______B_______',[['6','DIVISION 6',[]]]],
['12','1______C_______',[['6','DIVISION 6',[]]]],
['16','1______D_______',[['6','DIVISION 6',[]]]],
['25','1______E_______',[['6','DIVISION 6',[]]]],
['27','1______F_______',[['6','DIVISION 6',[]]]],
['31','1______G_______',[['6','DIVISION 6',[]]]],
['33','1______H_______',[['6','DIVISION 6',[]]]],
['34','1______I_______',[['6','DIVISION 6',[]]]]
];
this.xfll0=xfuncll0;
var _xll1=null;
this.xfll1=xfuncll1;
function xfuncll0(){
var curSel = document.getElementById("regiondiv_235_RegionID");
var curOpt = curSel.options;
var selected = _xll0;
_xll1=null;
if (selected != null) {
var noSelections = true;
for (var i = curOpt.length-1;
i>=1;
i--) if (curOpt[i].selected) {
noSelections = false;
if(_xll0.length>= i)var _xlli2 =_xll0[i-1][2];
if(_xll1== null){
_xll1 = _xlli2;
}
else{
var tmpary =_jxcsMulSelClientArrayMerge(_xlli2,_xll1);
_xll1 = tmpary;
}
}
if (curOpt.length > 0 && noSelections && curOpt[0].selected) {
for (var i =0;
i<_xll0.length;
i++){
var _xlli2 =_xll0[i][2];
if(_xll1== null){
_xll1 = _xlli2;
}
else{
var tmpary =_jxcsMulSelClientArrayMerge(_xlli2,_xll1);
_xll1 = tmpary;
}
}
}
var oldSel = new Array();
for (var i = 0;
i<curOpt.length;
i++){
if (curOpt[i].selected) oldSel[curOpt[i].value]='a';
}
curOpt.length = selected.length+1;
var selLen = selected.length;
var opt0 = curOpt[0];
if (opt0.value != -1 || opt0.text !='Select All'){
opt0.value = -1;
opt0.text = 'Select All';
}
if (oldSel[opt0.value] != null) opt0.selected = true;
for (var i = 0;
i < selLen;
i++) {
var opti = curOpt[i + 1];
if (opti.value != selected[i][0] || opti.text!=selected[i][1]){
opti.value = selected[i][0];
opti.text = selected[i][1];
}
if (oldSel[opti.value] != null) opti.selected = true;
}
}
else {
curOpt.length = 0;
}
xfuncll1();
}
function xfuncll1(){
var curSel = document.getElementById("regiondiv_235_DivisionID");
var curOpt = curSel.options;
var selected = _xll1;
if (selected != null) {
var oldSel = new Array();
for (var i = 0;
i<curOpt.length;
i++){
if (curOpt[i].selected) oldSel[curOpt[i].value]='a';
}
curOpt.length = selected.length+1;
var selLen = selected.length;
var opt0 = curOpt[0];
if (opt0.value != -1 || opt0.text !='Select All'){
opt0.value = -1;
opt0.text = 'Select All';
}
if (oldSel[opt0.value] != null) opt0.selected = true;
for (var i = 0;
i < selLen;
i++) {
var opti = curOpt[i + 1];
if (opti.value != selected[i][0] || opti.text!=selected[i][1]){
opti.value = selected[i][0];
opti.text = selected[i][1];
}
if (oldSel[opti.value] != null) opti.selected = true;
}
}
else {
curOpt.length = 0;
}
}
}
var jxcsMsel_regiondiv_235_RegionID= new _jxcsMselFunc_regiondiv_235_RegionID();</script><br><table id="tblFlt" border="1" border="0"><tr><td colspan="2"><table border="0"><tr><td><span>State<br></span></td><td><select size="4" name="mselect_235_stateID" multiple="multiple" id="mselect_235_stateID"><option value="-1">Select All</option><option value="1">Alabama</option><option value="2">Alaska</option><option value="54">Alberta</option><option value="3">Arizona</option><option value="4">Arkansas</option><option value="55">British Columbia</option><option value="5">California</option></select></td></tr><tr><td><span>D.C<br></span></td><td><select size="4" name="mselect_235_dcID" multiple="multiple" id="mselect_235_dcID"><option value="-1">Select All</option><option value="934">DC1</option><option value="65">DC2</option><option value="8">DC3</option><option value="67">DC4</option><option value="600">DC5</option><option value="57">DC6</option></select></td></tr><tr><td><span>Region</span></td><td><select size="6" name="regiondiv_235_RegionID" multiple="multiple" id="regiondiv_235_RegionID" onchange= "jxcsMsel_regiondiv_235_RegionID.xfll0()"></select></td></tr><tr><td><span>Division<br></span></td><td><select size="6" name="regiondiv_235_DivisionID" multiple="multiple" id="regiondiv_235_DivisionID" onchange="jxcsMsel_regiondiv_235_RegionID.xfll1()"></select></td></tr></table></td></tr></table><script>
jxcsMsel_regiondiv_235_RegionID.xfll0();
function jxcsMsel_regiondiv_235_RegionID_selectFunc(){
var selhash_0= new Array();
var sel_0=document.getElementById("regiondiv_235_RegionID");
for(var i = 0;
i < sel_0.length;
i++){
selhash_0[sel_0.options[i].value]=i;
}
var hasVal = selhash_0['-1'];
if (hasVal != null)sel_0.options[hasVal].selected = true;
jxcsMsel_regiondiv_235_RegionID.xfll0();
var selhash_1= new Array();
var sel_1=document.getElementById("regiondiv_235_DivisionID");
for(var i = 0;
i < sel_1.length;
i++){
selhash_1[sel_1.options[i].value]=i;
}
var hasVal = selhash_1['-1'];
if (hasVal != null)sel_1.options[hasVal].selected = true;
jxcsMsel_regiondiv_235_RegionID.xfll1();
}
jxcsMsel_regiondiv_235_RegionID_selectFunc();
</script></form></body></HTML>