В работе с веб-страницами на языке JavaScript часто возникает задача динамического изменения содержимого страницы. Одна из таких задач — добавление опций в элемент select из данных, хранящихся в JavaScript объекте. Конечно, это можно сделать вручную, через цикл и обращение к DOM, но намного проще и эффективнее будет использовать возможности библиотеки jQuery.
Прежде всего, рассмотрим пример такого объекта:
var selectValues = {
"1": "Опция 1",
"2": "Опция 2",
"3": "Опция 3"
};
И предположим, что на странице уже существует элемент select с id=»mySelect».
<select id="mySelect"></select>
Теперь, чтобы добавить опции из объекта в этот select, можно воспользоваться следующим кодом:
$.each(selectValues, function(key, value) {
$('#mySelect').append($('<option>', { value : key }).text(value));
});
Здесь используется метод $.each(), который служит для перебора элементов массива или свойств объекта. Метод принимает два аргумента: массив или объект, который нужно перебрать, и функцию, которая будет вызываться для каждого элемента массива или свойства объекта. В данном случае, функция принимает два параметра: ключ (key) и значение (value) текущего свойства объекта.
Внутри функции происходит добавление нового элемента option в select. Для этого используется метод append(), который добавляет указанный контент в конец каждого элемента из набора, обрабатываемого jQuery. В качестве контента используется созданный на лету элемент option с атрибутом value, равным текущему ключу, и текстом, равным текущему значению.
Таким образом, за счет использования библиотеки jQuery, задача добавления опций в элемент select из JavaScript объекта решается весьма элегантно и эффективно.
Добавить комментарий