隐藏选择选项不会反映

Question

我想隐藏选择中的某些选项。使用的解决方案是：

this.selectBox.children(".myOption_"+optionValue).wrap("<span></span>"); 

this.selectBox是提到的select的jQuery对象。

在Firefox中，它工作得很好，但是在IE8中没有反映出这些变化：如果有人应该看看select，那看起来似乎没有改变。但是，如果用户选择一个选项，则该值将遵循已删除的元素。

下面是一个例子：

<option value="val1">Test1</option> 
<option value="val2">Test2</option> 
<option value="val3">Test3</option> 
<option value="val4">Test4</option> 

现在，当我选择“测试1”，一个函数被调用并执行上面的代码。 从用户的角度来看，选项将保持不变。但是，如果他现在再次尝试选择“Test1”，则提供的值实际上将是“val2”，并且该选项应该被删除。再次，没有任何反应，所以他再次选择“Test1”，值将会是“val3”，依此类推。

为了显示发生的变化，我必须隐藏然后显示选择。

this.selectBox.children(".myOption_"+optionValue).wrap("<span></span>"); 
this.selectBox.hide().show(); 

上面的代码将使更改可见（隐藏点击的选项）。

什么是更奇怪的是，这提琴：

http://fiddle.jshell.net/FAkEK/25/show/

的作品，因为它应该在同一个浏览器。

我不明白为什么这一切都会突然发生。

这是怎么发生的？我应该在哪里寻找问题？

Answer 1

我不确定你为什么要隐藏该选项而不是删除它，但这里有一个关于如何做到这一点的例子。它基于this solution隐藏选项。

小提琴这里 - >http://jsfiddle.net/kAp42/2/

JSBin这里（应该在IE8工作） - >http://jsbin.com/uyuram/1

var $select = $('select'); 

$select.prop('selectedIndex', -1); //ensure we can hide the first option 

$select.change(function() { 
    //not sure why you would not want to remove the option instead of hiding it byt, if you want to hide... 
    $select.children('option:selected').wrap('<span class="hide-option"></span>'); 

    //remove it 
    //$select.children('option:selected').remove(); 

    this.selectedIndex = -1; //ensure we can hide the last option 
});