堆棧內存溢出
  簡體   English   中英

為什么我的下拉列表在除 IE11 之外的所有瀏覽器中都有效？

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

 原文  2019-08-15 15:02:28  1   1    javascript

問題描述

我有兩個單選按鈕，一個用於架空電纜，另一個用於地下電纜。 如果用戶單擊架空單選按鈕，則下拉列表中只需顯示架空電纜。 如果用戶選擇地下，則只顯示地下選項。

它在除 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 ”

1 個解決方案

解決方案1
 2 已采納  2019-08-16 07:07:34

2 可能的解決方案（ show()應該從body 的 onload 調用到 init）有點受這個問題的啟發（考慮在投票按鈕下接受，以防你滿意）：
-禁用屬性 - 可見，但不可選

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 動態下拉列表在IE11中不起作用？ JavaScript代碼可在其他瀏覽器上運行，但不能在IE11上運行，為什么？ IE11：拖放無法正常工作 為什么 windows.focus() 在所有情況下都不起作用 IE11 為什么我的代碼在IE11中不起作用 為什么在下拉列表中進行一次變更事件？ 為什么 event.stopImmediatePropagation() 在除 IE 之外的所有瀏覽器中都有效？ 如何強制下拉菜單在IE 11上向下移動？ LESS 在 IE11 中不起作用 - 為什么？ 我的jQuery不適用於IE11
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM