Drum Boom

Итак, по просьбе моего хорошего знакомого попытаюсь описать все проблемы, которые могут прийти в случае использования OPTIONS. Проблем много, все они растут в различных браузерах и основная часть их приходится на всеми любимый IE6 (прошу любить и жаловать - головная боль и источник вдохновения для самых изошрённых матерных восклицаний программистов и верстальщиков). Итак, перейдём к проблемам:

SELECT Option Disabled в IE или где сидят тестировщики Microsoft.

На самом деле все мы понимаем, что второй вопрос риторический ибо сидят они там где им и следовало сидеть и наверняка неплохо зарабатывают, так что не будем уж очень сильно ругать ребят. Как говорят эзотерические учения: Во всём что случается с юзером виноват только сам юзер и не надо винить в этом Билла Гейтса.

Когда это необходимо делать для отдельного SELECT я предлагаю достаточно простое решение:

Функция:

function opt_disabled(se_obj){
try {
var selIndex = se_obj.selectedIndex;
if(se_obj.options[selIndex].disabled){
while (se_obj.options[selIndex].disabled) selIndex +=1;
se_obj.selectedIndex = selIndex; }
return true;
}catch(e){ }
}

Сама форма:

<form>

<select name="name" onchange="opt_disabled(this);">
<option value="x" disabled>disabled</option>
<option value="2" >enabled1</option>
<option value="1" >enabled2</option>
<option value="x" >disabled2</option>
</select>

</form>

Но если вас в проекте куча таких вещей, то тут вам нужно всё-таки использовать что-то посерьёзнее.

Для этого у нас будут задействованы несколько функций:

Заменяем все события для всех SELECT(знаю, что у многих onload загружен, тогда берите это всё как функцию и добавляйте её в ваш уже существующий onload).

window.onload = function() {

if (document.getElementsByTagName) {

var s = document.getElementsByTagName("select");

if (s.length > 0) {

window.select_current = new Array();

for (var i=0, select; select = s[i]; i++) {

select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }

select.onchange = function(){ restore(this); }

emulate(select);

}

}

}

}

Далее, функция - заглушка для вариантов, когда пользователь нарывается на disabled (надо поставить его на место, а именно на место предидущего выбора).

function restore(e) {

if (e.options[e.selectedIndex].disabled) {

e.selectedIndex = window.select_current[e.id];

}

}

1. Итак, и наконец делаем, чтобы присутствовала боевая окраска у дизабленных options.

function emulate(e) {

for (var i=0, option; option = e.options[i]; i++) {

if (option.disabled) {

option.style.color = "disabled_opt";

}

else {

option.style.color = "normal_opt";

}

}

}

Аккуратненько сохраняем всё предидущее в текстовый файлик с расширением JS.

Чтобы внедрить такую штуку - думаю будет достаточно прописать следующее:

<!--[if lt IE 7]>

<script type="text/javascript" src="select_fix1.js"></script>

<![endif]–>

C этим мы вроде как разобрались, хотя предчувствую ещё кучу вопросов. Будем решать проблемы по мере их накопления.

Итак, проблема вторая:

DIV или другой элемент поверх SELECT в IE

Каждый, кто хоть раз писал выпадающие меню или применял их в сайтах и порталах с традиционными SELECT - знает что это за проблема. Я наткнулся на большое колличество решений в данной области и хочу Вам показать некоторые из них. Чтоб всем было понятно - при использовании DIV слоев на странице, select box всегда находится сверху.

Почему так?

Да потому, что SELECT в IE рисуется средствами WINApi и при этом имеет самый большой приоритет по визибильности

CSS выход из ситуации:

<style type="text/css">
.select-free  {
  position:absolute;
  padding:10px;
  left:40px;
  top:10px;
  z-index:10;
  overflow:hidden;/*must have*/
  width:150px;/*must have for any value*/;
  background:#eee;
}
.select-free iframe  {
  display:none;/*sorry for IE5*/
  display/**/:block;/*sorry for IE5*/
  position:absolute;/*must have*/
  top:0px;/*must have*/
  left:0px;/*must have*/
  z-index:-1;/*must have*/
  filter:mask();/*must have*/
  width:3000px;/*must have for any big value*/
  height:3000px/*must have for any big value*/;
  }

</style>

HTML код:

<select> <option>This is SELECT box behind LAYER</option><option>DIV без проблем покрывает SELECT</option> </select>

<div class="select-free"> <h2>Layer above SELECT BOX</h2> <p>CSS решение проблемы - DIV поверх SELECT</p> <p><a href="http://web-utils.net">www.web-utils.net</a></p>

<!--[if lte IE 6.5]><iframe></iframe><![endif]-->

</div>

Второе решение - скрипт от Александра Вачича (надеюсь правильно) Windowed Controls Hider

Основное описание там присутствует, но дам несколько опорных пунктов:

Первым делом подключаем библиотеки

<head>
...
<!-- #### THIS IS THE ONLY LINE NEEDED FOR THE WCH #### -->
<!--[if IE]>
<script type="text/javascript" src="../code/WCH.js"></script>
<![endif]-->
</head>

Далее указываем на див который мешает Select'у (он отзовётся если его окликнуть по ID "al" например).

WCH.Apply('al');

А также ну вот после этого у вас должны получиться такие же красивые вещи как у автора на примерах. Кстати у него вынайдёте решение также и проблем, которые у Вас возможно возникали с Флешем или видео . Вобщем я думаю товарищ нашего спасибо заслуживает.
Ещё одно наверняка интересное решение открывают ребята из Dyn WEB. Их тултипы перекрывают options - а их тултипы ничто иное как div - то есть тоже по нашей теме.

Ну, думаю достаточно пока по этому вопросу.

Перейдём к следующему.

Древовидный массив OPTIONs или SELECT с подкатегориями.

На самом деле это не совсем корректное решение с точки зрения юзабилити, так как они для отображения деревьев не предназначены, в этом случае, если очень хочется использовать для этого options - то надо несколько select'ов сделать, для каждого уровня по одному. Тогда можно для этого и AJAX использовать, чтоб не загромождать HTML большим колличеством подкатегорий.

Ну а на самом деле если уж совсем хочется, да ещё впридачу у Вас колличество подкатегорий не очень большое - то будем делать это своимим силами.

Решение ищется и пишется. Ждите. А можете и помочь заодно.

Перекрытие select в Internet Explorer

В связи с участившимися переходами с поисковиков на этот блог - публикую ещё одно распространённое решение проблемы с IE, когда select не перекрывается другими элементами. Например, выпадающие меню или  подсказки в элементах стоящих чуть выше select, то же самое происходит когда используются библиотеки tooltip не подстроенные под этот баг IE.

<div id="media" style="position:absolute; left:198px;
top:97px; width:400px; height:106px; z-index:3;">
<iframe style="position:absolute; left:0px; top:0px; width:100%;
height:100%; z-index:103;"></iframe>
<div style="position:relative; left:0px; top:0px; width:300px;
height:400px; z-index:203;background-color: #7777FF;border: 1px solid #000;"></div>
</div>
<select style="position: relative; left:208px; top:165px; width:200px; display: block;">
<option>Здесь будет ваш текст</option>
</select>