VPF::Как узнать какой OPTION имеет фокус у SELECT?

traffic11

Дата 19.9.2007, 11:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 22.8.2007

Репутация: нет
Всего: нет

Есть задача:
имеем два елемента <SELECT> между которыми перекидываются елементы (типа полный список чего-то и список выбраных обьектов)
на ondblclick повесили обработчик, который перекидывает выделенный елемент в другой SELECT
но есть проблемма - если выделить какой-то елемент, а потом кликнуть два раза по пустой области списка - то всеравно отрабатывает и перекидывает - что не есть правильно

Для решения этой проблеммы нужно узнать , какой OPTION в даный момент имеет фокус. и если он равен selectedIndex - то перекидывать, а если нет - то ничего не делать.

Вот только нигде не нашел что-то типа focusedIndex((( может кто-то подскажет как это реализовать самому???

Вот наш код :

Код



<select id="availableColumns" size="15" multiple style="width:100%; height:100%" ondblclick="moveList1ToList2(availableColumns,selectedColumns)">
<option value="<%=availableColumnCode%>">
<%=availableColumnName%>
</option>
</select>
.......
.....
<select id="selectedColumns" size="15" multiple style="width:100%; height:100%" ondblclick="moveList1ToList2(selectedColumns,availableColumns)">
<option value="<%=selectedColumnCode%>">
<%=selectedColumnName%>
</option>
...
...
</select>



<script>
function moveList1ToList2(list1,list2)
{          
    for(var i=0; i<list1.options.length; i++) 
    {
        var optionObj = list1.options[i];
        if (optionObj.selected) 
        {
            list2.options[list2.options.length] = new Option(
                                        optionObj.text, optionObj.value, false, false);
        }
    }
    for(var i=(list1.options.length-1); i>=0; i--) 
    {
        var optionObj = list1.options[i];
        if(list1.options[i].selected) 
        {
            for(var j=i+1; j<list1.options.length; j++)
            {
                list1.options[j-1].text = list1.options[j].text;
                list1.options[j-1].value = list1.options[j].value;
                list1.options[j-1].selected = false;
            }
            list1.length--;
//            list1.options[i] = null;
        }
    }
}
</script>

bronenos

Дата 19.9.2007, 13:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 4.7.2007

Репутация: нет
Всего: нет

selectedIndex
но имхо не пройдет так

SelenIT

Дата 22.9.2007, 03:28 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Я попробовал решить задачу другим путем. В Мозилле получилось сразу, в IE пришлось помучиться. Вот что получилось в итоге...

Код


<form>
<select id="availableColumns" size="15" style="width:100%; height:50%" ondblclick="moveList1ToList2(event,document.getElementById('availableColumns'),document.getElementById('selectedColumns'))">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="selectedColumns" size="15" style="width:100%; height:50%;" ondblclick="moveList1ToList2(event,document.getElementById('selectedColumns'),document.getElementById('availableColumns'))">
<option value="0">Zero</option>
</select>
</form>
<script>
function moveList1ToList2(evt,list1,list2)
{          
    if (evt.target)
    {
        // в Мозилле и т.п. можно просто узнать, по какому элементу кликнули
        if (evt.target.tagName != 'OPTION') return;
    }
    else if (window.event && list1.options[0])
    {
        /* в IE так просто не пойдет :(.
        Единственный найденный мной выход - сравнивать координату клика с суммарной высотой опций,
        которую, в свою очередь, тоже напрямую не замерить,
        понадобился тестовый элемент с теми же стилями, что у опции...
        кто предложит решение проще - буду очень благодарен! */
        var test = document.createElement('div');
        test.innerHTML = "&nbsp;";
        for (var prop in list1.options[0].currentStyle) {
           try { test.style[prop] = list1.options[0].currentStyle[prop]; }
           catch (ex) {}
        }
        list1.parentNode.appendChild(test);
        var optionHeight = test.offsetHeight;
        list1.parentNode.removeChild(test);
        if (event.offsetY > optionHeight * list1.length) return;
    }

    // а вот код самого переноса, имхо, можно сильно упростить ;)
    var i = 0, optionObj;
    while (optionObj = list1.options[i])
    {
        if (optionObj.selected) list2.appendChild(optionObj);
        else i++;
    }
}
</script>

Правда, почему-то в Опере ondblclick не работает (точнее, работает только для body, для текстовых элементов вызывается контекстное меню, а вот для select-ов - вообще ноль реакции)...

Это сообщение отредактировал(а) SelenIT - 22.9.2007, 03:29

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

traffic11

Дата 27.9.2007, 12:52 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 22.8.2007

Репутация: нет
Всего: нет

Цитата(SelenIT @ 22.9.2007, 03:28

)

Спасибо за предложеный вариант - попробую!
а узнать реальную коородинату клика с высотой , также как например ширину строки в пикселях, я не знаю как по другому - без спользования скрытого дополнительного елемента((

SelenIT

Дата 27.9.2007, 15:22 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

C координатой клика (event.offsetY) проблем нет, проблема лишь с определением высоты OPTION в IE - ее offsetHeight почему-то равна 0. Только из-за этого пришлось извращаться...

И еще, пример я писал на скорую руку, 18-ю строчку надо заменить на

Код


        if (evt.target.tagName.toLowerCase() != 'option') return;

для независимости от DOCTYPE.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »