- Сообщений: 114
JavaScript (принятое сокращение "JS") — это объектно-ориентированный язык программирования для HTML документа, который позволяет обеспечить динамическую интерактивность на веб-страницах.
Тег <select>
- roman
- Автор темы
- Не в сети
- Модератор
-
Less
Больше
6 мес. 3 нед. назад #57
от roman
roman создал тему: Тег <select>
Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>.
Рассмотрим создание данной конструкции с помощью JavaScript.
Рассмотрим создание данной конструкции с помощью JavaScript.
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- roman
- Автор темы
- Не в сети
- Модератор
-
Less
Больше
- Сообщений: 114
6 мес. 3 нед. назад #58
от 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);
}
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);
}
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- roman
- Автор темы
- Не в сети
- Модератор
-
Less
Больше
- Сообщений: 114
6 мес. 3 нед. назад #59
от roman
roman ответил в теме Тег <select>
Для обработки события выбора поля <option> в элементе <select> необходимо отследить событие на элементе <select>
Вариант 1.
selectList.onchange=function(){console.log(this.value);};
Вариант 2.
selectList.addEventListener("change", function() {
console.log(this.value);
});
Примечание:
Переменная selectList определена в предыдущих постах (см. выше).
Вариант 1.
selectList.onchange=function(){console.log(this.value);};
Вариант 2.
selectList.addEventListener("change", function() {
console.log(this.value);
});
Примечание:
Переменная selectList определена в предыдущих постах (см. выше).
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
- roman
- Автор темы
- Не в сети
- Модератор
-
Less
Больше
- Сообщений: 114
6 мес. 3 нед. назад #60
от 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 определена в предыдущих постах (см. выше).
Вариант 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 определена в предыдущих постах (см. выше).
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.