Question

我注意到形式选择元素和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').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 （正常）和 .hide （不是）但我想要一个动画来隐藏这个元素......

PS。当用户离开选择框时，您是否知道更好的淡出选项元素的方法（焦点按照与.blur相同的方式工作）？

Answer 1

尝试更改

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

与

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

这是我在代码中隐藏“选项”

的方法

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

隐藏选择框中的选定选项

1 个答案: