0

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

 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/

在同一个浏览器上正常工作。

我不明白为什么会突然发生这种情况。

为什么会这样？我应该在哪里寻找问题？

4

1 回答 1

1

我不确定您为什么要隐藏该选项而不是删除它，但这里有一个关于如何做到这一点的示例。它基于此解决方案来隐藏选项。

在这里小提琴-> 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
});
于 2013-03-29T14:23:45.260 回答