У меня есть простой элемент <select>, в котором есть несколько элементов <option>:
<select id="dollarAmount">
<option>select dollar amount</option>
<option>$5</option>
<option>$10</option>
<option>$15</option>
<option>$20</option>
</select>
Эта <select> форма отображается только тогда, когда пользователь наводит мышью на другой элемент на странице:
$("#parentDiv").mouseenter(function(){
$("#selectFormDiv").show(); //dollarAmount contained in this div
});
После запуска события mouseleave на parentDiv я проверяю, что форма размыта, чтобы параметры не оставались развернутыми. Как только оно размыто, я могу смело скрывать содержащий <div id="selectFormDiv">, чтобы форма и ее контейнер правильно скрывались.
$("#parentDiv").mouseleave(function(){
$("#dollarAmount").blur();
$("#selectFormDiv").hide();
});
Моя проблема: это работает в IE8 и Firefox 5.1, но не в Chrome 12.0 или Safari 5.1. Я обнаружил, что браузер является веб-набором и использовал различные команды для тестирования, и кажется, что blur() не приводит к сбою формы <select> (правильный термин? Попытка скрыть выпавшие опции) Приведенный выше код не скрывает параметры, если они были расширены после выхода из parentDiv. Инициирование события hide() в форме скрывает параметры в Chrome (в Opera все еще не повезло), но, конечно, также приводит к скрытию всей формы:
$("#parentDiv").mouseleave(function(){
if($.browser.webkit) {
$("#dollarAmount").hide();
$("#selectFormDiv").hide();
}
else {
$("#dollarAmount").blur(); //blur only triggers for non webkits?
$("#selectFormDiv").hide();
}
});
Я пробовал несколько других событий / методов, включая , запускающих document.mouseup при mouseleave для запуска blur(). Я пытался использовать события focusout, change и click, чтобы свернуть выбранную форму, но безуспешно.
Есть ли способ скрыть <select> формы <option> в браузерах webkit через вызов события?
Редактировать: для ясности фактическое событие blur (), похоже, срабатывает. У меня есть форма dollarAmount для прослушивания onblur только для печати на консоль. Печать консоли действительно выполняется, но форма просто не свернута, как в браузерах, не использующих webkit, когда вызывается blur().
Вот скрипка для уточнения проблемы: http://jsfiddle.net/JpWLb/4/
В браузере, отличном от webkit: щелкните элемент <select>, но не перемещайте его над <option>, как только они развернутся. С опциями, все еще расширенными, мышь вне содержащего div. В Firefox и IE результирующий вызов $("#mySelect").blur() заставляет опции убираться (ура!). Однако в браузерах webkit размытие расширенного элемента <select>, похоже, ничего не дает: параметры остаются расширенными. Мой желаемый результат - чтобы все браузеры скрывали расширенные опции при наведении курсора на содержащийся div.