скрыть выбранный параметр в поле выбора

Я заметил странное поведение с элементом 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 я хотел удалить option:selected (мой способ эмулировать заполнитель в этом виде поля), когда пользователь нажимает select с помощью этого кода:

$('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. Знаете ли вы лучший способ затухания элемента option, когда пользователь покидает поле select (фокусировка работает так же, как .blur)?


person cachaito    schedule 16.04.2011    source источник


Ответы (1)


Попробуйте изменить

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

с участием

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

Это то, что я делаю в своем коде, чтобы скрыть «опцию»

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