Question

我试图从选择中隐藏一些选项。使用的解决方案是：

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

this.selectBox是上述选择的jQuery对象。

在Firefox中它可以正常工作，但在IE8中没有反映出变化：如果应该看一下选择，它看起来似乎没有变化。但是，如果用户选择了一个选项，则该值将遵循已删除的元素。

以下是一个例子：

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

现在，当我选择“Test1”时，会调用一个函数并执行上面的代码。从用户的角度来看，选项将保持不变。但是如果他现在再次尝试选择“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隐藏选项。

这里小提琴 - ＆gt; http://jsfiddle.net/kAp42/2/

这里的JSBin（应该在IE8中工作） - ＆gt; 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
});

隐藏选择选项不反映

1 个答案: