Глюк в Chrome (требуется помощь в решении)

[berikiushi]

Имеется такая форма с select:

<select>
	<option value="0" selected="selected">Не указано</option>
	<option value="0" style="display: none;">Значение 1</option>
	<option value="0" style="display: none;">Значение 1</option>
	<option value="0" style="display: none;">Значение 1</option>
	...

	<option value="1" style="display: inline;">Значение 2</option>
	<option value="1" style="display: inline;">Значение 2</option>
	<option value="1" style="display: inline;">Значение 2</option>
	...
</select>?

Проблема в том что в Chrome, если количество <option> со стилем display: none; больше чем какое-то количество (примерно 18), то выпадающий список имеет высоту в одну строку, если меньше, то все нормально. В Firefox и Opera все нормально.

Пример с глюком: http://jsfiddle.net/d8ghW/

Пример без глюка: http://jsfiddle.net/amzrH/

У кого-нибудь есть идеи как избавиться от проблемы?

[tori]

Пара идей:

1. Перемещать те пункты, которые нужно скрывать, в низ селекта. Тогда глюка нет

2. Те пункты, которые нужно скрывать - их не скрывать, а удалять.

Вот кстати была эта проблема озучена:

http://stackoverflow.com/questions/7177113/chrome-displaynone-options-in-select

Там единственная рекомендация - удалять не нужные пункты.

[berikiushi]

Пара идей:

1. Перемещать те пункты, которые нужно скрывать, в низ селекта. Тогда глюка нет

2. Те пункты, которые нужно скрывать - их не скрывать, а удалять.

Вот кстати была эта проблема озучена:

http://stackoverflow.com/questions/7177113/chrome-displaynone-options-in-select

Там единственная рекомендация - удалять не нужные пункты.

1. Тоже думал об этом, но слишком уж заморочено получается, да и с js не настолько дружу, думал может возможно решить с помощью css.

2. Проблема в том, что в моем случае удалять нельзя, т.к. они при определенных условиях отображаются с помощью js.

Спасибо за участие.

[SelenIT]

То, что в Firefox (громадная белая простыня, уходящая за край окна, в самом верху которой сиротливо жмутся в одну строчку опции)... это точно нормально? Зачем вообще насиловать опции чуждым им display:inline-ом?

[berikiushi]

Итак. Посидел, подумал, почитал доки к jQuery и все-же решил проблему первым способом.

То, что в Firefox (громадная белая простыня, уходящая за край окна, в самом верху которой сиротливо жмутся в одну строчку опции)... это точно нормально? Зачем вообще насиловать опции чуждым им display:inline-ом?

В какой версии? В последней нормально отображается. И может тогда посоветуете более изощренный способ изнасилования?

[SelenIT]

У меня 16.0.1, по моим данным, она последняя и есть. Я бы просто не ставил display: none тем опциям, которые скрывать не надо — пусть браузер выводит их так, как привык (хороший способ — завести класс навроде .invisible { display:none; } и присваивать/убирать его нужным опциям при необходимости).

[berikiushi]

У меня 16.0.1, по моим данным, она последняя и есть. Я бы просто не ставил display: none тем опциям, которые скрывать не надо — пусть браузер выводит их так, как привык (хороший способ — завести класс навроде .invisible { display:none; } и присваивать/убирать его нужным опциям при необходимости).

Действительно в Firefox через jsfiddle.net отображается криво, локально тот-же код отображается нормально.

А вот какая разница между: <option style="display:none;">значение</option> и <option class="invisible">значение</option> я честно не понимаю.

[SelenIT]

Между ними — никакой. Но в первом случае, чтобы сделать опцию снова видимой, нужно явно переопределить display и "не промахнуться" (чтобы не поставить браузер в неловкое положение), а во втором достаточно просто убрать класс, и опция сама вернется в нормальное видимое состояние.