Intereting Posts
Требуется ли ссылка на ссылки? Граничное изображение с закругленными углами Как добавить содержимое div на новую страницу в jspdf? CSS: ограничить высоту динамической прокрутки Как работают предварительные загрузчики изображений? как использовать json-файл в html-коде jquery наводил div и отображал изображение на другом div с эффектом $ _FILES undefined PHP upload form. Невозможно выяснить Выберите элементы из разных источников и укажите их по дате содержимое «перескакивает» по вертикали в Chrome iOS с размером видового экрана, когда адресная строка скрыта / отображена Uncaught TypeError: Невозможно установить значение свойства ‘null Почему вы не можете установить высоту линии на якорный элемент с фоном? Почему ng-href ведет себя странно при parsingе строки geo VueJs: Фокусировка на входе с использованием директивы v-el внутри директивы v-repeat Учитываются ли имена classов в CSS-селекторах?

Firefox не обновляет тег select при обновлении страницы

Я столкнулся с проблемой, когда у меня есть тег select, который пользователь будет использовать для выбора бренда телефона, а страница с использованием jquery будет отображать только те телефоны.

Благодаря помощи людей в переполнении стека это отлично работает в каждом браузере, но Firefox. По какой-то причине, когда я обновляю страницу, тег select показывает последний выбранный параметр, но на странице отображаются все доступные телефоны. Есть ли у кого-нибудь какие-либо предложения или советы по поводу получения firefox для обновления тега select? Я не могу показать это на js.fiddle, потому что этого не происходит, поэтому вот ссылка:

http://davidarabis.com/test/test.html

И вот код:

 All Motorola HTC LG Samsung Kyocera   

JQuery:

 $(document).ready(function() { $('.manufacturers').change(function() { var selected = $(this).find(':selected'); $('ul.manulist').hide(); if ($(this).val() == 'all') { $('.scroll-content ul').show(); } else { $('.' + selected.val()).show(); $('.optionvalue').html(selected.html()).attr( 'class', 'optionvalue ' + selected.val()); } }); }); 

Заранее благодарим за любой совет или помощь.

FireFox будет кэшировать значения формы (включая выбранное значение поля select ), когда механизм обновления активируется нормально ( F5 ). Однако, если пользователь решит выполнить жесткое обновление ( Ctrl+F5 ), эти значения не будут извлечены из кеша, и ваш код будет работать должным образом.

Поскольку пользователи будут действовать по своей воле, вы должны предоставить решение для покрытия обоих случаев. Это можно сделать, приняв несколько подходов:

  • Обрабатывайте обновление каждой страницы: добавьте некоторый код сброса, чтобы установить выбранное по умолчанию состояние внутри window.onbeforeunload event listener.
  • Добавьте этот код в начало ready обработчика DOM.
  • Используйте куки-файлы, как описано в этом посте из блога Теда Павлика , чтобы обнаружить обновление страницы и действовать на нем (поместив туда тот же код).
  • Установите заголовки no-cache на стороне сервера, таким образом, выбирая соответствующие ресурсы.

Рекомендации

  • window.onbeforeunload в Mozilla Developer Network
  • Сообщение о переполнении stackoverflow в кеш-файле формы FireFox
  • Сообщение в блоге об этой функции с 2009 года
  • Еще одно сообщение в блоге по теме знакомства 2008

Примечание. В связи с сообщением SO , а также здесь, в комментариях, было предложено просто отключить autocomplete . Это, однако, не лучшее решение – по двум причинам: a. Совместимость: autocomplete – это атрибут HTML5 , поэтому мы ограничиваем нашу реализацию выбора и b. Семантика . objective состоит в том, чтобы обрабатывать случай обновления страницы. autocomplete предназначено для управления кэшированием истории сеансов и управления запросами элементов управления формой. Если эта реализация изменится в будущем, это решение сломается.

Я думаю, у меня есть более простое решение. Почему бы не установить выбор обратно в индекс 0, когда документ готов? Это может выглядеть так:

 $('.manufacturers').prop('selectedIndex',0); 

Таким образом, ваш скрипт может выглядеть так:

 $(document).ready(function() { $('.manufacturers').prop('selectedIndex',0); $('.manufacturers').change(function() { var selected = $(this).find(':selected'); $('ul.manulist').hide(); if ($(this).val() == 'all') { $('.scroll-content ul').show(); } else { $('.' + selected.val()).show(); $('.optionvalue').html(selected.html()).attr( 'class', 'optionvalue ' + selected.val()); } }); }); 

И после перезагрузки select вернется в первую позицию.

Если ваш тег выбора находится внутри формы, вы можете просто добавить к нему атрибут autocomplete="off" и он будет вести себя так, как ожидалось.