为什么我的下拉列表在除 IE11 之外的所有浏览器中都有效？答案

【问题标题】：Why my drop-down list is working in all the browsers except IE11?为什么我的下拉列表在除 IE11 之外的所有浏览器中都有效？
【发布时间】：2019-12-22 00:22:19
【问题描述】：

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

它在除 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";
  }
}

我得到的唯一错误信息是：

此页面上的代码禁用了前后缓存。更多信息请见：http://go.microsoft.com/fwlink/?LinkID=291337"

【问题讨论】：

我没有 IE11 可以测试，但我怀疑它与 .checked 属性有关。 jQuery在这里是一个选项吗？尽管存在所有缺点，但它在生成跨浏览器兼容组件方面非常出色。
看起来很奇怪 - 你应该通过 DOM 操作选择选项 - 从未见过隐藏选择选项，很惊讶它是可能的。在这里也找到了stackoverflow.com/questions/4398966/…
我不认为它是 .checked 属性，因为我有另一个代码，我使用了 .checked 属性，它运行良好@JamesAllen
或者最简单的技巧是使用 2 个选择并仅显示/隐藏一个，但不确定如何阻止提交 - 清除它的名称或删除提交时未使用的选择（？）。
如何将两个选择保持在同一个位置，这样如果我隐藏一个，另一个将显示在同一个位置？ @汤姆

标签： javascript

【解决方案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>

【讨论】：

希望您不再需要 hide 1 od 2 选择版本 ;-) 如果没有设置相同的名称并且不确定，收音机无法正常工作，但假设您想要收音机，但开始使用收音机，例如一个复选框？
非常感谢，第一种方法效果很好。对于第二种方法，为什么我要获取覆盖页面的“选择元素”内的整个代码。只需运行代码 sn -p 你就会明白我的意思。
有一个调试/演示日志记录到“报告”跨度 - 4 行和日志功能。这些对函数没有用，但是您可以看到发生了什么，删除/添加项目的顺序等。例如，您不能从数组中间删除元素 - 长度保持不变并且它的索引设置为未定义 - 通常非常不切实际。 .. 可能会删除 logString、2 个记录器调用和函数以及最后一个报告跨度以获得最终干净的代码。
现已移除，移动版有点复杂，但移动版/DTP版也适用于sn-ps和IE一样。
非常感谢，你救了我的命 :)