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>

  <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 2

如果只想隐藏更改，则再次隐藏该数据。

你可以试试看。

<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>

Answer 3

当涉及表单元素的样式时，不同的浏览器具有不同级别的支持。由于IE不再被开发，并且最近一次更新是在多年前，因此您将发现在那行不通且永远不会行事的行为。

现在，您的代码确实可以在支持option这种样式的浏览器中使用，option因为您将硬编码1作为索引，所以它始终将第二个元素设置为隐藏。相反，设置.selectedIndex的select是不可见的，这样你总能得到的任何索引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>