HTML+CSS+JavaScript

Уважаемы коллеги, всем добрый день!!! В общем не нашел нормального материала по своему вопросу, а вопрос такой. E меня скрипте, в форме есть такой вот SELECT

<p>Год рождения<select name="age" id="age" size="1"> <option value="1989">1989</option> <option value="1988">1988</option> </select>

В общем мне не хочется в ручную вбивать все года, хочу что бы за меня это сделал цикл в JS. Для это вроде как есть целый объект HTMLSelectElement , массив options[ ], и конструктор Option с синтаксисом

var новая_опция=new Option(текст опции, опция);

В общем в книге был представлен какой то кривой синтаксис и пример, мне бы что нибудь попроще через
var age = document.getElementById('age'); Понятное дело что массив с опциями созданный с помощью цикла, допустим у нас уже есть.

Просветите пожалуйста в этом вопросе, с уважением к вам и вашему труду HK416!!!

Объекта HTMLSelectElement в JS не существует, это раз.
Для того, чтобы построить список циклом, у которого текст и значения опций имеют одинаковые значения, промежуточного массива значений не надо, достаточно указать циклу начальный и конечный годы, как параметр итерации. Это два.
А в третьих - так принципиально строить этот список на клиенте, ведь чего проще сделать это циклом на сервере?

Во первых я этот объект не из головы взял, а из книги, ссылка на книгу http://www.williamspublishing.com/Books/5-8459-0884-1.html , страницы 469-474. Если не верите что это объект существует вот пожалуйста ещё ссылки, надеюсь вы краем глаза посмотрите все ссылки.

http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html (нажмите F3 и в окошечко поиска вбейте HTMLSelectElement )

http://msdn.microsoft.com/en-us/library/windows/apps/hh868772.aspx

https://developer.mozilla.org/en/DOM/HTMLSelectElement

http://docs.oracle.com/javase/1.5.0/docs/guide/plugin/dom/org/w3c/dom/html/HTMLSelectElement.html

http://krook.org/jsdom/HTMLSelectElement.html

Но я ещё процитирую книгу ))) В JS оба эти дескриптора представляются одним объектом SELECT. В DOM уровня 1 соответствующий объект тоже один, но называется он HTMLSelectElement. (стр.469)

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

Второе я написал, есть массив options у этого объекта.

А в третьих - так принципиально строить этот список на клиенте, ведь чего проще сделать это циклом на сервере?

Мне принципиально, потому что это будет более элегантно, и лучше будет выглядеть чем, печатать форму на сервере, или добавлять атрибуты другими ф-ями. Тем более на стороне сервера, невозможно динамически менять архитектуру селекта. А если Select представлен целым объектом, и интерфейсом для его изменения, то зачем придумывать велосипед???

Вы не то читали. Есть объект select, с набором свойств и методов, как и объект option принадлежащий этому объекту списку, имеет свой набор и свойств. Не буду все тут перечислять, скажу лишь, что вы углубились в "дебри".

>потому что это будет более элегантно, и лучше будет выглядеть чем, печатать форму на сервере

Вы путаете вывод списка, с динамическим сценарием, о котором в вашем вопросе не было ни слова. Если подразумевается некий сценарий, динамические изменения объектов, это понятно, в противном случае ваше "элегантность" коту под хвост. :)

Интересно! Вы дали почти весь расклад, а выводов не сделали :-)))
100% ответа есть в вопросе.

var w = document.getElementById('age');     for (i=1900; i<=2012; i++){         var nw = new Option(i, i);                 w.appendChild(nw);     }

Может, есть и более изящный метод, я с позиции быдлокодера пишу.

w.appendChild(nw) - w.add(nw);

В общем до сих пор пытался создать, эту систему но так что то и не выходит, понятное дело код написанный выше, не работает. Я вот нашел материал благодаря которому частично заработало http://www.w3schools.com/jsref/met_select_add.asp Но вот проблема, я приспособил кодж под свои нужды

var x = document.getElementById("age"); var option=document.createElement("option"); for(var i=1900; i<2012; i++){     option.text=i;     option.value=i;     x.add(option,null);

Но из-за вот этой строки var option=document.createElement("option");
Появляется только одна опция 2012. Понятное дело что это происходит из-за var option. Пробовал сделать массив объектов, не заработало. В общем подскажите пожалуйста что нужно дописать что бы заработало, нормально.

>Понятное дело что это происходит из-за var option

Это не из-за этого, а из-за того, что вы создали один элемент option, а добавить пытаетесь кучу. Это тогда не о создании и добавлении новых надо говорить, а о клонировании объектов.
А это с какого потолка взято - x.add(option,null)? Вы читайте о методах прежде чем их применять.

var x = document.getElementById("age");     for(var i=1900; i<2012; i++){      var option=document.createElement("option");     option.text=i;      option.value=i;      x.add(option);   }

ЕЕЕЕЕЕ заработало, но уважаемый confirm, я человек принципиальный и обидчивый, так что если вам угодно вот с какого потолка я это взял, и ссылка и код оттуда ))))

http://www.w3schools.com/jsref/met_select_add.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function displayResult() { var x=document.getElementById("mySelect"); var option=document.createElement("option"); option.text="Kiwi"; try   {   // for IE earlier than version 8   x.add(option,x.options[null]);   } catch (e)   {   x.add(option,null);   } } </script> </head> <body> <form> <select id="mySelect">   <option>Apple</option>   <option>Pear</option>   <option>Banana</option>   <option>Orange</option> </select> </form> <button type="button" onclick="displayResult()">Insert option</button> </body> </html>

А если бы неделю назад сразу бы написали тот код который дали выше, было бы ваще супер, но жизнь к сожалению не идеальна ))) В общем спасибо!

Ваше дело, хотите обижайтесь хотите нет.
Если вы будет по таким примерам изучать JS и брать это все на веру, то примите мои сожаления.
В IE, второй аргумент этого метода, это индекс добавляемого элемента в списке, если это будет null, то Ослик выдаст ошибку о недопустимом аргументе (несовпадение типов). Не помню какой из них.
В W3C второй аргумент, это ссылка на элемент списка, перед которым вставляется новый элемент. Если равен null, то вставляется в конец списка.
Если же этот аргумент опущен, то и Ослик, и браузеры с любовью к W3C поступят одинаково - в конец списка.

Читайте что нить получше.