Тег <select>

Больше
6 мес. 55 мин. назад - 6 мес. 46 мин. назад #149 от roman
roman создал тему: Тег <select>
Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>.
Рассмотрим создание данной конструкции с помощью JavaScript.
Последнее редактирование: 6 мес. 46 мин. назад пользователем roman.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
6 мес. 47 мин. назад - 5 мес. 4 нед. назад #150 от roman
roman ответил в теме Тег <select>
1. В HTML-документе создан элемент с идентификатором 'div', в который будем добавлять список
var div = document.getElementById('div');

2.Создание  списка
//Create array of options to be added
var array = ["Значение №1","Значение №2","Значение №3","Значение №4","Значение №5"];

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
div.appendChild(selectList);


//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = i;
    option.text = array;
    selectList.appendChild(option);
}

Последнее редактирование: 5 мес. 4 нед. назад пользователем roman.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
6 мес. 5 мин. назад - 5 мес. 4 нед. назад #151 от roman
roman ответил в теме Тег <select>
Для обработки события выбора поля <option> в элементе <select> необходимо отследить событие на элементе <select> 
Вариант 1.
 selectList.onchange=function(){console.log(this.value);};
  
Вариант 2.
 selectList.addEventListener("change", function() {
   console.log(this.value);
 }); 

Примечание:
Переменная selectList определена в предыдущих постах (см. выше). 
Последнее редактирование: 5 мес. 4 нед. назад пользователем roman.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
5 мес. 4 нед. назад - 5 мес. 4 нед. назад #152 от roman
roman ответил в теме Тег <select>
Для выбора по умолчанию определенного поля <option> в элементе <select>   необходимо:

Вариант 1. Задать значение для элемента select
selectList.value = '2';
Соответственно выберется элемент у которого значение value = '2'

Вариант 2. Задать значение при формирование списка option
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = i;
    option.text = array;
    selectList.appendChild(option);
    if (i==1) {option.selected = true;}
}

Примечание:
Переменная selectList определена в предыдущих постах (см. выше).
Последнее редактирование: 5 мес. 4 нед. назад пользователем roman.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Время создания страницы: 0.221 секунд