style.display = "none" 不適用於 IE，但適用於其他瀏覽器

Question

我有一個下拉菜單。 如果我在下拉列表中選擇選項值，則該選項應該被隱藏。 我附上了我的一段代碼以供參考。 這在 crome 中工作正常，但隱藏在 IE-10 中不起作用。 在 JavaScript 中建議它會有所幫助。

我也嘗試過 Visibility 屬性。 但也不工作。

 function dropdown(dd) { document.getElementById('mySelect').options[1].style.display = "none"; }

 <form> <select id="mySelect" onchange="dropdown(this)"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </form>

Answer 1

當涉及到表單元素的樣式時，不同的瀏覽器有不同程度的支持。 由於 IE 不再被開發，而且最近的更新是幾年前的，你會發現在那里不起作用並且永遠不會的行為。

現在，您的代碼在支持此類option樣式的瀏覽器中確實有效，它只是始終將第二個option元素設置為隱藏，因為您將1硬編碼為索引。 相反，將select的.selectedIndex設置為不可見，以便您始終獲得當前選擇的任何option的索引。 並且，這將隱藏最后選擇的選項，不顯示隨后顯示列表的時間，但是select仍將顯示該值，因此您還必須將其刪除。

 document.getElementById("mySelect").addEventListener("change", dropdown); function dropdown() { this.options[this.selectedIndex].style.visibility = "hidden"; // Hide on the list this.value = ""; // Hide the new value }

 <form> <select id="mySelect"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </form>

Answer 2

它的另一種方式

<form>
  <select id="mySelect" onchange="dropdown(this)">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</form>

<script>
function dropdown(dd) {
  var a = document.getElementById('mySelect');
  a.remove(a.selectedIndex);
}
</script>

Answer 3

如果您只想在更改時隱藏，如果您再次更改數據，則另一個更改。

你可以試試看。

<form>
  <select id="mySelect" onchange="dropdown(this)">
    <option>--Select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</form>

<script>
var mySelect = [];
function dropdown(dd) {
  var mySelect1 = document.getElementById('mySelect');
  if(mySelect.text !== undefined && mySelect.index !== '') {
    mySelect1.options.add(new Option(mySelect.text, mySelect.index), mySelect1.options[mySelect.index]);
  }

  var selectedText = mySelect1.options[mySelect1.selectedIndex].text;

  mySelect.text = selectedText;
  mySelect.index = mySelect1.selectedIndex;
  mySelect1.remove(mySelect1.selectedIndex);
}
</script>