Question

＆＃13;

$('#inputTest').on('keyup', function() {
  $('#helloSellect option').css({
    display: "none"
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputTest">
<select id="helloSellect" multiple>
  <option>oye</option>
  <option>ram</option>
  <option>raj</option>
  <option>ban</option>
</select>

＆＃13;

我想在用户点击输入框中的任何单词时隐藏选项。在Chrome中，它正在工作但不在IE中工作。问题是什么，以及如何解决它。

Answer 1

据我所知，我不认为所有浏览器都支持display：none。但是，您可以尝试禁用选项无效，然后只需在css中添加一个条目即可定义不应显示禁用的条目。

类似的东西：

$('#helloSellect option').prop({'disabled': true});

然后将这样的内容添加到您的CSS

select option[disabled] {
    display: none;
}

..或者只是删除上述条目（除非您以后需要它们）。

Answer 2

使用CSS无法真正“隐藏”<select>控件中的选项。 Chrome可能允许它，但它们实际上并没有消失。删除选项的唯一方法是从DOM中删除该项。

$('#helloSelect option').on('click', function() {
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputTest">
<select id="helloSelect"  multiple>
  <option>oye</option>
  <option>ram</option>
  <option>raj</option>
  <option>ban</option>
</select>

选择的选项css在IE10中不起作用？

2 个答案: