javascript - 为什么我的下拉列表在除 IE11 以外的所有浏览器中都有效？

Question

我有两个单选按钮，一个用于架空电缆，另一个用于地下电缆。如果用户点击架空单选按钮，则只有架空电缆必须显示在下拉列表中。如果用户选择地下，则只显示地下选项。

它在除 IE11 之外的所有浏览器中都运行良好。在 Internet Explorer 中，如果我单击架空或地下的单选按钮，它会显示所有类型的电缆。

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 code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337"

Answer 1

2 种可能的解决方案(show() 应该从 body 的 onload 调用到 init)有点受 this 启发问题(如果您满意，请考虑在投票按钮下接受):
- disable 属性 - 可见，但不可选择

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>

• 更新 DOM(删除内部数组中断长度，因此它被替换为 @end)，还添加了小日志记录以显示已完成的操作，selectedIndex 也应设置为 -1，但 0 显示第一个选项，所以更适合演示。

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>