Подтвердить что ты не робот

Меню "Выбор HTML" становится беспорядочным

У меня довольно странная проблема с меню <select>. Когда я вернусь на страницу, содержащую <select> после того, как я ее вытащил (или свести к минимуму), <select> иногда рушится и становится невосприимчивым. Я проверил весь свой код, и он действителен на 100%, и я видел, как это произошло и на других сайтах.

Я испытал меню <select>, рушившееся в последней версии Safari (доступно для OSX 10.6.8), а также последние версии Chrome и Firefox (протестированные как в Windows Vista, так и в OSX 10.6.8). Как ни странно, я не смог воспроизвести сбой <select> в Chrome, запущенном в Windows 8... Один последний лакомый кусочек: кажется, что длина элемента <select> влияет на вероятность развала меню (то есть, чем больше <option> элементов в <select>, тем вероятнее это произойдет. Иногда меню <select> рушится после выбора и вызывается один раз, иногда это может занять 5 или 6 попыток.

Мой вопрос: что вызывает эту проблему <select>, и есть ли известная работа? Пожалуйста, см. Примерный код ниже, это очень просто, но меню <select>, тем не менее, рухнуло в браузерах/операционных системах, о которых я упоминал ранее. Спасибо заранее!

<!doctype html>
<html>
<head>
  <title>Select Test</title>
</head>

<body>
 <select name ="Test">
  <option value = "0">0</option>
  <option value = "1">1</option>
  <option value = "2">2</option>
  <option value = "3">3</option>
  <option value = "4">4</option>
  <option value = "5">5</option>
  <option value = "6">6</option>
  <option value = "7">7</option>
  <option value = "8">8</option>
  <option value = "9">9</option>
  <option value = "10">10</option>
  <option value = "11">11</option>
  <option value = "12">12</option>
  <option value = "13">13</option>
  <option value = "14">14</option>
  <option value = "15">15</option>
  <option value = "16">16</option>
  <option value = "17">17</option>
  <option value = "18">18</option>
  <option value = "19">19</option>
  <option value = "20">20</option>
  <option value = "21">21</option>
  <option value = "22">22</option>
  <option value = "23">23</option>
  <option value = "24">24</option>
  <option value = "25">25</option>
  <option value = "26">26</option>
  <option value = "27">27</option>
  <option value = "28">28</option>
  <option value = "29">29</option>
  <option value = "30">30</option>
  <option value = "31">31</option>
  <option value = "32">32</option>
  <option value = "33">33</option>
  <option value = "34">34</option>
  <option value = "35">35</option>
  <option value = "36">36</option>
  <option value = "37">37</option>
  <option value = "38">38</option>
  <option value = "39">39</option>
  <option value = "40">40</option>
  <option value = "41">41</option>
  <option value = "42">42</option>
  <option value = "43">43</option>
  <option value = "44">44</option>
  <option value = "45">45</option>
  <option value = "46">46</option>
  <option value = "47">47</option>
  <option value = "48">48</option>
  <option value = "49">49</option>
  <option value = "50">50</option>
  <option value = "51">51</option>
  <option value = "52">52</option>
  <option value = "53">53</option>
  <option value = "54">54</option>
  <option value = "55">55</option>
  <option value = "56">56</option>
  <option value = "57">57</option>
  <option value = "58">58</option>
  <option value = "59">59</option>
  <option value = "60">60</option>
  <option value = "61">61</option>
  <option value = "62">62</option>
  <option value = "63">63</option>
  <option value = "64">64</option>
  <option value = "65">65</option>
  <option value = "66">66</option>
  <option value = "67">67</option>
  <option value = "68">68</option>
  <option value = "69">69</option>
  <option value = "70">70</option>
  <option value = "71">71</option>
  <option value = "72">72</option>
  <option value = "73">73</option>
  <option value = "74">74</option>
  <option value = "75">75</option>
 </select>
 </body>
</html>

Update: Вот скриншот сложенного/невосприимчивого меню <select> в Safari 5.1.9, работающего на OSX 10.6.8 (это другой mac, чем тот, который я использовал ранее). После 3 попыток (выбор опции, а затем кликание из браузера) она перестала отвечать на запросы. Он не отображает список опций при нажатии и полностью не отвечает, пока страница не будет перезагружена. Я скоро загружу хром на Mac.

Screenshot

Обновление 2: Согласно @webdad3, эта проблема также присутствует в IE9

Обновление 3:

Вот ссылка на исходный код, который я опубликовал выше, но в JSbin. Предоставлено @starbeamrainbowlabs.

http://jsbin.com/eXOMeRI/1/edit

Обновление 4:

Согласно @Zarazthuztra, эта проблема также присутствует в OSX 10.8.

Обновление 5:

Я беру @cloudcoder2000 совет и размещаю эту ссылку в самом вопросе. Я считаю, что это показывает, что <select> не должен разрушаться (как и многие из нас), независимо от количества <option>, которое он содержит.

Есть ли максимальное количество опций (значений) в выпадающем меню HTML?

Я хотел бы также поблагодарить всех за их помощь до сих пор.

Обновление 6: Я боюсь, что этот вопрос начинает застаиваться... Если у кого-то есть какие-то теории относительно того, что вызывает эту проблему (независимо от того, как это может показаться "вне стены" ), дайте мне знать, и я проверю ее как можно скорее.

Обновление 7: Просто подтвердите: я столкнулся с этой ошибкой на нескольких страницах, которые не используют Javascript. Кроме того, приведенный выше пример кода (который не содержит Javascript) рухнул для меня и нескольких других пользователей stackoverflow (в разных операционных системах и браузерах).

Обновление 8:

@Capile удалось воспроизвести проблему с коллапсом в Safari 7.0.1, запущенную на Mac OS X 10.9.1.

Обновление 9: Используя код @Capile, я смог получить <select> в "uncollapse" в Safari 5.1.10 (работает на OSX 10.6.8). Пожалуйста, прочитайте его ответ за подробностями. Я буду тестировать его код в Chrome и Firefox позже сегодня или завтра. Это действительно многообещающе, я думаю, мы приближаемся к решению этого вопроса. Я просто хотел бы поблагодарить всех за их помощь до сих пор, вы, ребята, великолепны!

Обновление 10:Наконец, я получил возможность проверить код @Capile в Chrome на одной из моих машин Snow Leopard (10.6.9). У меня было довольно много проблем с тем, чтобы <select> рухнуть на этот раз, но после нескольких минут попытки, наконец, это произошло. После вставки его кода в консоль <select> "uncollapsed" (чтобы сделать его как можно неэлегантно). Это довольно любопытно, потому что если эта проблема "свернуть" связана с сбором мусора на системном уровне, то можно подумать, что a <select> будет "крах" довольно последовательно в браузерах, но это не так. Я тестировал множество браузеров (в нескольких операционных системах), а <select> "обвал" кажется чрезвычайно распространенным в некоторых браузерах (например, Safari)... Я, по общему признанию, не эксперт-программист, поэтому я могу ошибаться, но в любом случае, я просто хотел обновить этот вопрос, чтобы больные умы могли обдумывать новую информацию.

Обновление 11: Я просто добавил щедрость к этому вопросу, пытаясь вызвать больше интереса (надеюсь, это поможет). Во всяком случае, я смог заставить <select> свернуть последнюю версию Firefox (работает на OSX 10.6.9) прошлой ночью. У меня, к сожалению, не было возможности проверить код @Capile в Firefox, но я постараюсь сделать это сегодня.

4b9b3361

ОТВЕТЫ

Ответ 1

Так как пользовательский интерфейс элемента <select> обрабатывается ОС в нескольких браузерах (что делает их полный стиль более сложным или невозможным), я бы предположил, что это ошибка на уровне ОС или ошибка в браузере который относится к некоторым функциональным возможностям UI-интерфейса - определенно, не проблема исходного HTML-кода, которая проста и соответствует спецификациям).

Для браузера элемент <select> полностью нормальный: вы можете видеть его в DOM, даже манипулировать им (он также прослушивает события). Если вы отсоедините и подключите его к DOM, он снова работает нормально (откройте и включите выбор). Если вы просто запустите код ниже в окне консоли, вы снова заработаете его:

var s=document.getElementsByTagName('select'),
    i=s.length,
    a=document.createElement('div'),
    b;
while(i-->0) {
    s[i].parentNode.insertBefore(a, s[i]);
    b=s[i].parentNode.removeChild(s[i]);
    a.parentNode.insertBefore(b,a);
    a.parentNode.removeChild(a);
    b=null;
}

Я предполагаю, что когда браузер размыт, элементы пользовательского интерфейса могут попасть в какой-то сборщик мусора OS, и когда вы вернетесь в браузер, он просто ожидает, что ОС снова отобразит его (но он может " t найти его). Но это просто предположение - мне нужно было бы профилировать память Safari, чтобы действительно добраться до него.

Я мог бы реплицировать его на Safari 7.0.1, работающем в Mac OS X 10.9.1, но не смог реплицировать его на Firefox 28.0a2 (Aurora) или Chrome 34 (Canary).

Ответ 2

Как упоминалось в комментариях, это похоже на отставание. Является ли это вызванным спецификациями вашего компьютера, браузером, плагинами/расширениями или чем-то еще на странице, вы не можете поместить 75 опций в выборку и ожидать, что Safari и IE будут поддерживать, Я не уверен, что отставание может вызвать зависание страницы и заставить пользователя перезагрузить ее, но я честно не знаю, что еще могло бы вызвать ее.

Я не уверен, где вам понадобится выбор с 75 параметрами, но если вам это действительно нужно, я бы рекомендовал простой ввод текста, где вы ограничиваете, что пользователь может ввести в 1-75. Да, это не так просто и элегантно, как выпадающий список, но он выполнит эту работу, и вам не придется беспокоиться о глюках.

Ответ 3

Aaaahhhh, это длинный снимок, но...

Попробуйте удалить пробелы в ваших HTML-атрибутах (не внутри кавычек), поэтому value = "0" становится value="0".

Ответ 4

Я видел подобное поведение с элементом select, но это, как правило, не было причиной проблемы. Если базовые компоненты браузера отстают, то обычно это происходит потому, что в фоновом режиме существует длинный script, который потребляет все ресурсы браузера. Является ли страница, которую вы вставили над всей страницей, или существует также значительный javascript, который выполняется на странице?

Ответ 5

Найдите браузер, который работает для вас, ожидая обновления/исправления. Всякий раз, когда я сталкиваюсь с проблемой браузера, я обычно переключаюсь между Firefox, Google Chrome и IE.

Что касается вашего кода, я предлагаю посмотреть на JavaScript, что должно сделать вашу жизнь проще, превратив все эти жестко закодированные <option> в нечто динамичное. Что-то вроде:

// Starting from index 0, 
// create an <option> with the value of the current index
// keep creating <option> until you hit index 75.

Ответ 6

У вас есть проблема, не связанная с <select>.

Некоторые, если не большинство логик веб-приложений DHTML не работают хорошо с кнопками "назад" и "вперед", это почти история.

Исходный код, который вы указали, в порядке.

Обновите браузер или измените его для другого, способного выполнить задачу. в вашем браузере есть проблемы с простым выбором около 75 элементов - обратитесь к поставщику вашего браузера.

Ограничение количества элементов в select существует как для всего. Мы ограничены объемом памяти для каждого приложения - зависит от платформы и объема памяти. Браузер имеет некоторые внутренние коллекции элементов, и эти коллекции ограничены некоторыми количествами. То же самое касается каждого приложения. Хотя эти ограничения далеки от почти сотни предметов, выбор может содержать намного больше, но это еще одна боль, чтобы сделать их. В некоторых приложениях интрасети ppl использует тысячи опций для каждого выбора и множественный выбор из 75.

Проверьте JS вместо этого, возможно, у вас есть script, работающий над элементом select, который вызывает его неправильное поведение.

UPD: может быть проблема с

 <!doctype html>

it ver 5 нестандартно. 03,2014 (для получения дополнительной информации см. http://www.w3.org/html/wg/drafts/html/master/)

попробуйте

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

чтобы предотвратить попытку браузера проанализировать HTML-версию 5.

Ответ 7

здесь ваше решение проблемы использует javascript для значений печати в выбранных тегах, например:

      для (я = 1969; я <= 2014; я ++)      {      document.write( '' + я + ''); }