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"

Answer 1

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>