Javascript изберете - динамични списъци
Как изглежда отвън
Вие избирате в първия списък на браузъра, а вторият списък е пълен с имената на операционната система, на която работи в браузъра, но въз основа на стойността на втория списък е пълен с третия списък, съдържащ наличната версия на браузъра.
Да предположим, че има елемент на страницата:
Както може да се види, SELECT се състои от елементи опция. които са елементи на списъка. Вариант елементи се състоят от текст етикет затворена между опцията тагове и стойност на атрибут, който съдържа стойността на съответния текст етикета. Текст етикет е видим за потребителя в списъка, докато стойността на стойност не се показва на екрана, и се предава на сървъра, когато изпращането на формуляра (само стойностите избрани елементи от списъка се предават на сървъра). По този начин, да променят SELECT елемент. ние трябва да работим върху елементи опция.
За достъп до списъка с нашата позиция ще използва метод DOM getElementById документа за обект:
Ако списъкът е вътре формата, можете да се обърнете към него, както и чрез формата на:
Когато, myForm име, определен от атрибута име в маркера за форма и mySelect име на елемента форма, посочена от атрибута име в маркера SELECT.
Как да добавите нов елемент в SELECT списъка?
Добавяне на елементи към края на списъка, така удобно:
Имотът Дължината на обекта съдържа редица опции на елементи в списъка. Тази функция е достъпна както за четене и писане. Ако зададете дължина собственост на стойност по-голяма от сегашната броя на елементите, празните елементи са добавени към списъка. Ако зададената стойност е по-малко от сегашния брой на елементи от списъка, списъкът ще бъде съкратен до посочения брой на елементите (допълнителните елементи ще бъдат изтрити). По този начин, за да добавите нов елемент към списъка и така (нека да кажем, че имаме празен списък, добавете първия елемент):
Нека се върнем към опцията конструктор функция (). В допълнение към уточняване на текста и стойностите дали позицията е избрана по подразбиране, можете да посочите (defaultSelected), т.е. дали един елемент избран от възстановяване от нулиране () и дали елементът текущо избрания в (избрани). пълен синтаксис Вариант Функцията обект конструктор има следния вид:
В случаите, когато първите два аргумента - един ред и на третия и cherverty булеви аргументи и да вземат стойности истина или лъжа.
До сега, за да добавите елемента ние използвахме BOM. но е по-добре във всяко едно отношение, да се използват методи на DOM. и добавяне на елемент за осъществяването на тази:
И накрая, някои функции на IE :-) В IE 5+ изключени (поради нестабилна работа) възможност за добавяне на елемент от списъка чрез новата опция (). от прозореца на дете, когато самият SELECT списъка се намира в един документ (рамката на прозореца), тъй като предметите са добавени от друг документ (рамката на прозореца), например, ако изберете В прозорец родител и добавяте елементи трябва отвори през window.open (). Използването на DOM-методи можете да се справите с този проблем. Повече по този въпрос по-подробно.
Достъп до елементите на списъка
Списък на елементите в масива опции се индексират от нула, така че първият елемент в списъка има индекс от 0:
objSel.options [0] - първи елемент от списъка.
objSel.options [objSel.options.length-1] - последният елемент в списъка
Промяна на елемент от списъка
Как мога да разбера кой елемент е избран и как да изберете елемента, който искате?
В SELECT елемент обект съществува selectedIndex собственост. който съдържа индекса на избрания елемент, или -1, ако не е избрана елементи.
Тук искам да отбележа, че можете да изберете повече от една стойност от списъка, за това трябва да се уточни множествена етикет имот да избере и определи броя на видима без превъртане чрез списък с елементи атрибут размер (т.е., задаване на височината на списъка измерва в видимите елементи), например, маркиране създадете списък с височината на 3-елемент, което позволи да изберете няколко елемента едновременно. Ако зададете размер по-голям от 1, а след това в списъка вече не е от падащото меню и променя външния вид на обикновен възел с лентата за превъртане (ако dostupka neobhodimoti). Размерът на имот може да бъде определен и без централизиран.
В случая, когато на разположение избор на множество елементи, собственост включва индекс на първия избран елемент в списъка (т.е. елемент, който е разположен по-горе в списъка). Че в този случай, за да намерите всички на избраните елементи, които трябва да се повтаря всички елементи на масив от опции и да се провери тяхната избран собственост. което е вярно в отделни елемента:
функция getSelectedIndexes приема като аргумент списък на обекта и връща масив от индексите на избраните елементи.
Пример за приложение (дисплей индекс на избрания елемент):
Описани selectedIndex свойства и свойства са избрани за четене и писане, така им дава желаните стойности могат да бъдат изолирани елементи.
За да изберете няколко елемента (ако имотът е настроен множествена), за да инсталирате избран = вярно имот за всички необходими елементи:
Ако обърнете внимание на бъг в браузъра Opera, която се проявява в динамично запълване на списъка чрез скрипт и последващ монтаж на избрания елемент през имота или избрана selectedIndex. Грешката се появява в приложението на празни елементи в списък, до които достъпът не е възможно от сценария (скрипта не ги вижда, но потребителят вижда и да ги изберете). Тези псевдо-празен елементи на списъка появяват след монтаж свойства selectedIndex или избрани. За да заобиколите този бъг в Opera инсталация, използвайте тези имоти през setTimeout със закъснение от 1 мс:
Премахването на I-тия елемент от списъка
Или, използвайки метода на DOM, е да премахнете:
Как да се чисти на SELECT списък (как да се премахнат всички елементи в списъка)?
За да направите това, можете да зададете дължината на имота до нула:
Или се обадете DOM премахване на начин за всеки елемент от списъка:
Като елемент пързалка на списъка нагоре или надолу
Динамични свързани списъци Изберете - поглед отвътре
Послепис Не забравяйте да изтеглите и запишете на linkedselect.js библиотека
-> Обсъждане на статия във форума
<- Назад к списку статей