Why my drop-down list is working in all the browsers except IE11?

Question

I have two radio buttons, one for overhead cables and the other for underground cables. If the user clicks the overhead radio button, only the overhead cables have to be displayed in the drop-down list. And if the user chooses the underground, only the underground options should be displayed.

It worked fine in all the browsers except for IE11. In internet explorer, it shows all types of cables if I click the radio button of overhead or underground.

HTML

  <form>
    <input type="radio" id="over" onclick="show(); ch1();" onchange="show()" checked value="yes">Overhead
    <input type="radio" id="under" onclick="show(); ch2();" onchange="show()" value="no"> Underground
  </form>
</div>

<div class="sel">
  <label class="labels">Line Type:</label>
  <select id="po" onchange="info(); vol1()" onclick="show()" style="font-size: 20px; margin-top: 22px; width: 240px;">
    <option value="null" data-Z="0" id="a">#4 Aluminum Triplex</option>
    <option value="null" data-Z="1" id="b">#2 Aluminum Triplex</option>
    <option value="null" data-Z="2" id="c">1/0 Aluminum Triplex</option>
    <option value="null" data-Z="3" id="d">3/0 Aluminum Triplex</option>
    <option value="null" data-Z="4" id="e">#2Aluminum Phaseplex</option>
    <option value="null" data-Z="5" id="f">2/0 Aluminum Phaseplex</option>
    <option value="null" data-Z="6" id="g">2/0 AASC PEJ</option>
    <option value="null" data-Z="7" id="h">#2 ACSR PEJ </option>
    <option value="null" data-Z="8" id="i">#4 Copper PEJ </option>
    <option value="null" data-Z="9" id="j">2/0 Copper PEJ </option>
    <option value="null" data-Z="10" id="k">4/0 Copper PEJ </option>
    <option value="null" data-Z="11" id="l">336.4 ASC PEJ</option>
    <option value="null" data-Z="12" id="m">350 kcmil Copper PEJ</option>
    <option value="null" data-Z="13" id="n">500 kcmil Copper PEJ</option>
    <option value="mun" data-Z="14" id="pp">#4 Aluminum C/N</option>
    <option value="mun" data-Z="15" id="p">1/0 Aluminum Triplex</option>
    <option value="mun" data-Z="16" id="q">4/0 Aluminum Triplex</option>
    <option value="mun" data-Z="17" id="r">350 kcmil Aluminum Triplex</option>
    <option value="mun" data-Z="18" id="s">350 kcmil Aluminum Quadplex</option>
    <option value="mun" data-Z="19" id="t">500 kcmil Copper single</option>
    <option value="mun" data-Z="20" id="u">750 kcmil Aluminum single</option>
    <option value="mun" data-Z="21" id="v">1000 kcmil Copper single</option>
    <option value="mun" data-Z="22" id="w">1000kcmil Aluminum single</option>
  </select>
</div>

JavaScript

function ch2() {
  var opt1 = document.getElementById("over");
  var opt2 = document.getElementById("under");

  if (opt2.checked) {
    opt1.checked = false;
  }
}

function ch1() {
  var opt1 = document.getElementById("over");
  var opt2 = document.getElementById("under");

  if (opt1.checked) {
    opt2.checked = false;
  }
}

function show() {
  var over = document.getElementById("over");
  var under = document.getElementById("under");

  if (over.checked == false && under.checked == true) {
    document.getElementById("a").style.display = "none";
    document.getElementById("b").style.display = "none";
    document.getElementById("c").style.display = "none";
    document.getElementById("d").style.display = "none";
    document.getElementById("e").style.display = "none";
    document.getElementById("f").style.display = "none";
    document.getElementById("g").style.display = "none";
    document.getElementById("h").style.display = "none";
    document.getElementById("i").style.display = "none";
    document.getElementById("j").style.display = "none";
    document.getElementById("k").style.display = "none";
    document.getElementById("l").style.display = "none";
    document.getElementById("m").style.display = "none";
    document.getElementById("n").style.display = "none";
  } else if (over.checked == true && under.checked == false) {
    document.getElementById("pp").style.display = "none";
    document.getElementById("p").style.display = "none";
    document.getElementById("q").style.display = "none";
    document.getElementById("r").style.display = "none";
    document.getElementById("s").style.display = "none";
    document.getElementById("t").style.display = "none";
    document.getElementById("u").style.display = "none";
    document.getElementById("v").style.display = "none";
    document.getElementById("w").style.display = "none";
  } else if (over.checked == true && under.checked == true) {
    document.getElementById("pp").style.display = "block";
    document.getElementById("p").style.display = "block";
    document.getElementById("q").style.display = "block";
    document.getElementById("r").style.display = "block";
    document.getElementById("s").style.display = "block";
    document.getElementById("t").style.display = "block";
    document.getElementById("u").style.display = "block";
    document.getElementById("v").style.display = "block";
    document.getElementById("w").style.display = "block";
    document.getElementById("a").style.display = "block";
    document.getElementById("b").style.display = "block";
    document.getElementById("c").style.display = "block";
    document.getElementById("d").style.display = "block";
    document.getElementById("e").style.display = "block";
    document.getElementById("f").style.display = "block";
    document.getElementById("g").style.display = "block";
    document.getElementById("h").style.display = "block";
    document.getElementById("i").style.display = "block";
    document.getElementById("j").style.display = "block";
    document.getElementById("k").style.display = "block";
    document.getElementById("l").style.display = "block";
    document.getElementById("m").style.display = "block";
    document.getElementById("n").style.display = "block";
  } else if (over.checked == false && under.checked == false) {
    document.getElementById("pp").style.display = "block";
    document.getElementById("p").style.display = "block";
    document.getElementById("q").style.display = "block";
    document.getElementById("r").style.display = "block";
    document.getElementById("s").style.display = "block";
    document.getElementById("t").style.display = "block";
    document.getElementById("u").style.display = "block";
    document.getElementById("v").style.display = "block";
    document.getElementById("w").style.display = "block";
    document.getElementById("a").style.display = "block";
    document.getElementById("b").style.display = "block";
    document.getElementById("c").style.display = "block";
    document.getElementById("d").style.display = "block";
    document.getElementById("e").style.display = "block";
    document.getElementById("f").style.display = "block";
    document.getElementById("g").style.display = "block";
    document.getElementById("h").style.display = "block";
    document.getElementById("i").style.display = "block";
    document.getElementById("j").style.display = "block";
    document.getElementById("k").style.display = "block";
    document.getElementById("l").style.display = "block";
    document.getElementById("m").style.display = "block";
    document.getElementById("n").style.display = "block";
  }
}

The only error message that I got is:

The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337"

I don't have IE11 to test on, but my suspicion is that it has something to do with the .checked property. Is jQuery an option here? For all of it's faults, it is pretty wonderful at producing cross-browser compatible components. — James Allen, Aug 15 '19 at 15:07
Looks strange - you should manipulate select options by DOM - never seen hiding select options, was surprised it is possible. Found it also here https://stackoverflow.com/questions/4398966/how-can-i-hide-select-options-with-javascript-cross-browser/4399040#4399040 — Jan, Aug 15 '19 at 15:10
I don't think it is the .checked property, because i had another code that i used the .checked property with it and it worked fine @JamesAllen — Hadeel Elfasay, Aug 15 '19 at 15:19
Or simplest trick could be use 2 selects and show/hide only one, but not sure how to block submit then - clear it's name or remove unused select on submit(?). — Jan, Aug 15 '19 at 15:22
How can I keep the two selects in the same place so if I hide one the other will be shown at the same place? @Tom — Hadeel Elfasay, Aug 15 '19 at 15:37
I actually tried what you said and it did work with all the browsers except IE11 @Tom — Hadeel Elfasay, Aug 15 '19 at 16:02
Sure by display none/empty string or block(?) you switch it on/off on same place where hidden keep space without displaying. I am using it sometimes and there are probably some methods working in all browsers, may check something tomorrow. — Jan, Aug 15 '19 at 17:41

Jan · Accepted Answer · 2019-08-17T10:41:54.603

2 possible solutions (show() should be called from body's onload to init) a bit inspired by this question (consider accept under voting buttons in case you are happy with):
- disable property - visible, but not selectable

function show() {
  var over = document.getElementById("over");
  var under = document.getElementById("under");
  var options = document.getElementById("po").options;

  for (var a=0;a<options.length;a++) {
    options[a].disabled = (options[a].value == "null") ^ under.checked == true;
  }
  document.getElementById("po").selectedIndex = -1;
}
show();

<form>
        <input type="radio" name="overUnder" id="over" onchange="show()" checked value="yes">Overhead
        <input type="radio" name="overUnder" id="under" onchange="show()" value="no"> Underground
</form>
</div>
<div class="sel">
        <label class="labels">Line Type:</label>
        <select id="po" onchange="info(); vol1()" style="font-size: 20px; margin-top: 22px; width: 240px; ">
                <option value="null" data-Z="0" id="a">#4 Aluminum Triplex</option><option value="null" data-Z="1" id="b">#2 Aluminum Triplex</option><option value="null" data-Z="2" id="c">1/0 Aluminum Triplex</option><option value="null" data-Z="3" id="d">3/0 Aluminum Triplex</option><option value="null" data-Z="4" id="e">#2Aluminum Phaseplex</option><option value="null" data-Z="5" id="f">2/0 Aluminum Phaseplex</option><option value="null" data-Z="6" id="g">2/0 AASC PEJ</option><option value="null" data-Z="7" id="h">#2 ACSR PEJ </option><option value="null" data-Z="8" id="i">#4 Copper PEJ </option><option value="null" data-Z="9" id="j">2/0 Copper PEJ </option><option value="null" data-Z="10" id="k">4/0 Copper PEJ </option><option value="null" data-Z="11" id="l">336.4 ASC PEJ</option><option value="null" data-Z="12" id="m">350 kcmil Copper PEJ</option><option value="null" data-Z="13" id="n">500 kcmil Copper PEJ</option><option value="mun" data-Z="14" id="pp">#4 Aluminum C/N</option><option value="mun" data-Z="15" id="p">1/0 Aluminum Triplex</option><option value="mun" data-Z="16" id="q">4/0 Aluminum Triplex</option><option value="mun" data-Z="17" id="r">350 kcmil Aluminum Triplex</option><option value="mun" data-Z="18" id="s">350 kcmil Aluminum Quadplex</option><option value="mun" data-Z="19" id="t">500 kcmil Copper single</option><option value="mun" data-Z="20" id="u">750 kcmil Aluminum single</option><option value="mun" data-Z="21" id="v">1000 kcmil Copper single</option><option value="mun" data-Z="22" id="w">1000kcmil Aluminum single</option>
        </select>
</div>
</form>

Update DOM (delete inside array break length, so it is replaced @end), also small logging added to show what was done and selectedIndex should be set to -1 also, but 0 show 1st option, so better for demo.

var hiddenOptions = [];

function show() {
  var select = document.getElementById("po");
  var options = select.options;
  var under = document.getElementById("under");
  var newHidden = [];
 
  var a=0;
  while (!((options[a].value == "null") ^ under.checked == true)) a++;
  while (a < options.length && (options[a].value == "null") ^ under.checked == true) {
    newHidden.push(options[a]);
    select.remove(a);
  }
  for(a=0;a<hiddenOptions.length;a++) {
    if (!((hiddenOptions[a].value == "null") ^ under.checked == true)) {
      select.appendChild(hiddenOptions[a]);
    }
  }
  hiddenOptions = newHidden;
  select.selectedIndex = 0;
}

show();

<form>
        <input type="radio" name="overUnder" id="over" onchange="show()" checked value="yes">Overhead
        <input type="radio" name="overUnder" id="under" onchange="show()" value="no"> Underground
</form>
</div>
<div class="sel">
        <label class="labels">Line Type:</label>
        <select id="po" onchange="info(); vol1()" style="font-size: 20px; margin-top: 22px; width: 240px; ">
                <option value="null" data-Z="0" id="a">#4 Aluminum Triplex</option><option value="null" data-Z="1" id="b">#2 Aluminum Triplex</option><option value="null" data-Z="2" id="c">1/0 Aluminum Triplex</option><option value="null" data-Z="3" id="d">3/0 Aluminum Triplex</option><option value="null" data-Z="4" id="e">#2Aluminum Phaseplex</option><option value="null" data-Z="5" id="f">2/0 Aluminum Phaseplex</option><option value="null" data-Z="6" id="g">2/0 AASC PEJ</option><option value="null" data-Z="7" id="h">#2 ACSR PEJ </option><option value="null" data-Z="8" id="i">#4 Copper PEJ </option><option value="null" data-Z="9" id="j">2/0 Copper PEJ </option><option value="null" data-Z="10" id="k">4/0 Copper PEJ </option><option value="null" data-Z="11" id="l">336.4 ASC PEJ</option><option value="null" data-Z="12" id="m">350 kcmil Copper PEJ</option><option value="null" data-Z="13" id="n">500 kcmil Copper PEJ</option><option value="mun" data-Z="14" id="pp">#4 Aluminum C/N</option><option value="mun" data-Z="15" id="p">1/0 Aluminum Triplex</option><option value="mun" data-Z="16" id="q">4/0 Aluminum Triplex</option><option value="mun" data-Z="17" id="r">350 kcmil Aluminum Triplex</option><option value="mun" data-Z="18" id="s">350 kcmil Aluminum Quadplex</option><option value="mun" data-Z="19" id="t">500 kcmil Copper single</option><option value="mun" data-Z="20" id="u">750 kcmil Aluminum single</option><option value="mun" data-Z="21" id="v">1000 kcmil Copper single</option><option value="mun" data-Z="22" id="w">1000kcmil Aluminum single</option>
        </select>
</div>
<span id="report" style="float:right"></span>
</form>

Hope you do not need that hide 1 od 2 selects version anymore ;-) And radio did not worked without same name set and was not sure, but suppose you wanted radio, but started with radio used like a checkbox ? — Jan, Aug 16 '19 at 07:13
Thanks a lot, the first method worked greatly. For the second method why do I get the entire code that is inside 'the select element' covering the page. just run the code snippet and you will understand what I mean. — Hadeel Elfasay, Aug 16 '19 at 19:48
There is a debug/demo logging to "report" span - 4 lines and log function. These are useless for function, but you can see what is going on, order of items removed/added, etc. For example you cannot remove element from middle of array - length remains same and it's index is set to undefined - quite impractical often... Probably delete logString, 2 logger calls & function and last report span to have final clean code. — Jan, Aug 17 '19 at 05:16
Removed now, a bit complicated from mobile, but also mobile/DTP version works with both snippets same as IE. — Jan, Aug 17 '19 at 10:44

Why my drop-down list is working in all the browsers except IE11?

1 Answers1

Linked