在选择框中隐藏选定的选项

Question

我注意到 form select 元素和 jQuery .fadeOut / .hide

的奇怪行为

我有简单的选择框：

<select name="categories">
  <optgroup label="Choose option:">
    <option selected="selected" value="placeholder">CHOOSE OPTION</option>
    <option value="category-books">Books</option>
    <option value="category-music">Music</option>
  </optgroup>
</select>

使用 jQuery，当用户使用以下代码单击 select 时，我想删除 option:selected（我在这种框中模拟占位符的方法）：

$('select').click(function() {
    $('option[value=placeholder]').fadeOut('slow');
});

$('select').blur(function(){
    $('option[value=placeholder]').fadeIn('slow');
});

此代码在 Firefox 中有效，并且在单击后 option 平滑地淡出，但在其他浏览器（IE9、Opera、Chrome）中这不起作用：-[ 您可以在这里查看： http://jsfiddle.net/cachaito/Xy7DF/3/

我尝试了 .remove（有效）和 .hide（无效），但我想要一个动画来隐藏这个元素...

PS。你知道当用户离开 select 框时淡入 option 元素的更好方法吗（focusout 的工作方式与 .blur 相同）？

Answer 1

尝试改变

$('option[value=placeholder]').fadeOut('slow')

与

$('option[value=placeholder]', this).fadeOut('slow')

这就是我在代码中隐藏“选项”的方法

$('#mySelect option[value=' + myVal + ']').hide().siblings().show();