Why My Drop-down List Is Working In All The Browsers Except Ie11?

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

Solution 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

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

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