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

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

现在，您的代码在支持这种option样式的浏览器中可以正常工作，它只是将第二个option元素设置为隐藏，因为您将1硬编码为索引。而是将select的{{3}}设置为不可见，以便始终获得当前选择的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>

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

3 个答案: