Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > size select

Автор: ArsNov 18.4.2008, 09:35

Проблема такая:
Через js создаю select и к нему options, селекту задаю size = 5 . Почему-то селект все равно отображается в одну строчку, с чем это может быть связано? Причем в одном месте документа(в таблице) такой селект отображается корректно, а в другом (в диве) нет. С чем это может быть связано? :(

Автор: ArsNov 18.4.2008, 11:22

Вот написал html и js файл

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">


<script src="test.js"></script>

<body>


<div id="Content">
</div>


</body>

</html>

А вот и js файл

Код


window.onload = function () 
{
//Создаем селект
var object=document.createElement("select");
    
    SA(object,"id",'testel');
    SA(object,'multiple',true);
    //Устанавливаем размер = 5 
    SA(object,'size','5');
    //прикрепляем к диву в документе
    document.getElementById('Content').appendChild(object);

    //создаем опцию
    var object2=document.createElement("option");
    SA(object2,"value",'1');
    SA(object2,"innerText",'1');
    object.appendChild(object2);
    
    //создаем опцию 2
    var object3=document.createElement("option");
    SA(object3,"value",'2');
    SA(object3,"innerText",'2');
    object.appendChild(object3);


    function SA(e,p,v)    //на вход элемент, имя параметра, значение
    {
    e.setAttribute(p,v);
    }

}

Первоначально грузится все нормально, но если щелкнуть допустим на полосу прокрутки и обновить страницу список свернется. Затем если щелкнуть по селекту и обновить страницу, он опять развернется.. Так и должно работать? Может я чего-то упустил?
Да забыл скачазть это все под IE6

Автор: ArsNov 18.4.2008, 14:25

Добился решения вопроса путем добавления строк:

Код


object.focus();

после внедрения селекта в документ. Это сделал для того, чтобы корректно отобразились выбраные по умолчанию пукты селекта, иначе будет выбран только последний пункт по-умолчанию.

А этот код перерисовывает селект:

Код


object.focus();
object.style.display='block';

Вcе прекрасно отрабатывает, но хотелось бы видеть более красивое решение! подскажите.
И еще! тут есть одна проблемы? : если в документе таким образом создается несколько селектов, то документ начинает скролиться из-за фокусировки на элементах. Есть ли способ сделать так, чтобы скролинга не было во время работы js?? И вторая проблема- производительность- при прорисовке ольшого количества опций (более 100) скрипт работает очень медленно.

В итоге вышло так:

Код


window.onload = function () 
{
//Создаем селект
var object=document.createElement("select");
    
    SA(object,"id",'testel');
    SA(object,'multiple','multiple');
    //Устанавливаем размер = 5 
    SA(object,'size','5');
    object.size=5;

    //прикрепляем к диву в документе
    document.getElementById('Content').appendChild(object);
    object.focus();
    //создаем опцию
    var object2=document.createElement("option");
    SA(object2,"selected",'true');
    SA(object2,"value",'1');
    SA(object2,"innerText",'1');
    object.appendChild(object2);
    
    //создаем опцию 2
    var object3=document.createElement("option");
    SA(object3,"selected",'true');
    SA(object3,"value",'2');
    SA(object3,"innerText",'2');
    object.appendChild(object3);
    object.focus();
    object.style.display='block';

    function SA(e,p,v)    //на вход элемент, имя параметра, значение
    {
    e.setAttribute(p,v);
    }

}