Пов’язані або динамічний select приклад як додати і видалити елементи option зі списку
Для цього використовуємо два пов'язаних списку SELECT - є вввіду, що при виборі елемента в одному списку в інший який спочатку порожній будуть підставляються пов'язані з цим обраним елементом значення.
Для створення списку будемо використовувати конструктор Option який визначений в стандарті the Option Element з наступним синтаксисом:
Як приклад, із запропонованого списку SELECT, виберемо країну і курорт в ній на який поїдемо відпочивати.
Для цього список курортів, відповідний кожній країні занесемо в масиви,
і організуємо два списки SELECT один порожній c атрибутом multiple і [] в імені в який динамічно будуть додані необхідні елементи
Спочатку створимо посилання на список для курортів тобто на той SELECT в який необхідно додати елементи.
додавати елементи в масив options цього списку будемо викликаючи конструктор Option цей приклад реалізований у функції Add_option_to_select ().
При виборі пункту "Країна в яку їдемо" видаляємо курорти відносяться до колишньої країні для цього будемо повністю очищати список використовуючи подсвойство length масиву options об'єкта Select з його допомогою встановимо розмір масиву дорівнює нулю і тоді всі поточні елементи будуть видалені (remove option from select).
За допомогою подсвойства length також можна додавати нові елементи в кінець списку SELECT отримавши розмір всього списку - дивіться приклад в функції Present ().
або якщо відомий розмір масиву додати елементи в кінець списку можна по іншому:
А також подсвойство length можна використовувати для звернення до останнього елемента списку - це особливо зручно якщо ніхто не знає розмір всього масиву options
При використанні подсвойства length необхідно врахувати, що:
1.Якщо значення length буде задано більше ніж кількість існуючих елементів то в список будуть додані порожні рядки.
2.Якщо менше, то список буде укорочений до довжини length
Приклад додавання елемента option в кінець списку SELECT реалізовано в функції Present ():
Що б видалити елемент options зі списку скористаємося методом:
remove (in long index); який відноситься до DOM інтерфейсу SELECT.
Де in long index - це індекс в масиві options видаляється елемента:
Тепер, на підставі усього вищевикладеного, ми можемо написати функцію Remove_option_from_select () яка видалить виділені нами елементи option зі списку select multiple.
У статті Список SELECT multiple ми побачили як отримати всі вибрані користувачем значення SELECT multiple, а далі, звертаючись до індексу кожного обраного елемента ми будемо його видаляти.
Видалення елементів реалізовано в функції Remove_option_from_select ():
Що б показати основні принципи роботи зі зв'язаними списками SELECT ми брали значення для option з масивів які ми поставили в нашому лістингу, але ті ж принципи використовуються і при обробці масиву підвантаженими методом AJAX з сервера.
Ще в цьому розділі: