Question

我有一个选择列表，它有很多选项。根据某些输入，我想隐藏选择列表中的几个选项。为了隐藏选择列表中的选项，我写了像

这样的jquery

$('#selectlist1 option').each(function(){  

   $(this).hide();

})

但是这段代码似乎只适用于firefox，而且它不适用于chrome和ie。如果我写的话

$('#selectlist1').hide();

适用于所有浏览器。我应该看哪个指针？

Answer 1

这是使用新选项按需重建选择列表的相对简洁的方法。这适用于动态插入的选项（IE和Chrome在显示和隐藏方面存在问题）

$().ready(function() {
    //store a reference
    var select = $('#myselect');
});

function rebuild_select(arr_new_options) {
    var parent = select.parent();
    select.empty();
    var clone = select.clone();
    select.remove();
    for(var x=0; x < arr_new_options.length; x++) {
        clone.append(arr_new_options[x]);
    }
    parent.append(clone);
    select = clone;
}

Answer 2

您无法隐藏单个选项元素x-browser。唯一的解决方案是使用仅包含您希望显示的选项的新元素替换选择。

查看此其他question

Answer 3

对于那些在受影响的版本中需要处理隐藏选项元素的人，我在这里发布了一个解决方法，它不会克隆或删除选项，但会包围它们，这可以说更容易处理：

http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/

试图隐藏选项列表中的选项..不适用于chrome和ie

3 个答案: