style.display =“ none”在IE中不起作用，但在其他浏览器中起作用

Question

我有一个下拉菜单。如果我在下拉列表中选择选项值，则该选项应作为结果隐藏。我附上了我的代码以供参考。这在crome中工作正常，但隐藏在IE-10中不工作。建议使用JavaScript会有所帮助。

我也尝试了可见性属性。但也不起作用。

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

这是另一种方式<form>&nbsp; <select id="mySelect" onchange="dropdown(this)">&nbsp; &nbsp; <option>1</option>&nbsp; &nbsp; <option>2</option>&nbsp; &nbsp; <option>3</option>&nbsp; &nbsp; <option>4</option>&nbsp; &nbsp; <option>5</option>&nbsp; </select></form><script>function dropdown(dd) {&nbsp; var a = document.getElementById('mySelect');&nbsp; a.remove(a.selectedIndex);}</script>

Answer 2

如果只想隐藏更改，则再次隐藏该数据。你可以试试看。<form>&nbsp; <select id="mySelect" onchange="dropdown(this)">&nbsp; &nbsp; <option>--Select</option>&nbsp; &nbsp; <option>1</option>&nbsp; &nbsp; <option>2</option>&nbsp; &nbsp; <option>3</option>&nbsp; &nbsp; <option>4</option>&nbsp; &nbsp; <option>5</option>&nbsp; </select></form><script>var mySelect = [];function dropdown(dd) {&nbsp; var mySelect1 = document.getElementById('mySelect');&nbsp; if(mySelect.text !== undefined && mySelect.index !== '') {&nbsp; &nbsp; mySelect1.options.add(new Option(mySelect.text, mySelect.index), mySelect1.options[mySelect.index]);&nbsp; }&nbsp; var selectedText = mySelect1.options[mySelect1.selectedIndex].text;&nbsp; mySelect.text = selectedText;&nbsp; mySelect.index = mySelect1.selectedIndex;&nbsp; mySelect1.remove(mySelect1.selectedIndex);}</script>

Answer 3

当涉及表单元素的样式时，不同的浏览器具有不同级别的支持。由于IE不再被开发，并且最近一次更新是在多年前，因此您将发现在那行不通且永远不会行事的行为。现在，您的代码确实可以在支持option这种样式的浏览器中使用，option因为您将硬编码1作为索引，所以它始终将第二个元素设置为隐藏。相反，设置.selectedIndex的select是不可见的，这样你总能得到的任何索引option当前选择。并且，这将隐藏上一次选择的选项，而不显示随后显示列表的时间，但是，select仍然会显示该值，因此您也必须删除该值。document.getElementById("mySelect").addEventListener("change", dropdown);function dropdown() {&nbsp; this.options[this.selectedIndex].style.visibility = "hidden"; // Hide on the list&nbsp; this.value = ""; // Hide the new value}<form>&nbsp; <select id="mySelect">&nbsp; &nbsp; <option>1</option>&nbsp; &nbsp; <option>2</option>&nbsp; &nbsp; <option>3</option>&nbsp; &nbsp; <option>4</option>&nbsp; &nbsp; <option>5</option>&nbsp; </select></form>