隐藏选择框中选定的选项

Question

我注意到 form select 元素和 jQuery .fadeOut / .hide 的奇怪行为

有简单的 select 框：

<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 中有效并且 <强>选项点击后平滑淡出，但在其他浏览器（IE9，Opera，Chrome）中这不起作用:-[在这里你可以检查一下：http://jsfiddle.net/cachaito/Xy7DF/3/

我尝试了.remove（有效）并且< strong>.hide （不）但我想要一个动画来隐藏这个元素...

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

Answer 1

尝试更改

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

这

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

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

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