Список вибору на JQuery

Подібні списки частенько застосовуються на сайтах для кращої візуалізації списків, зокрема додавання або видалення пунктів у списку. Виглядає це таким чином: два блоки, які можуть містити списки, в лівому знаходяться пункти, які нам належить вибрати, після вибору задані пункти переносяться в правий блок. Переносити пункти можна як цілком, так і по одному. Так само є кнопка, яка дозволяє видалити пункти зі списку.
Подібний список з візуалізацією, ми можемо отримати, скориставшись JQuery-плагіном, про який і поговоримо далі. Плагін дуже простий у використанні, його легко інтегрувати в свої проекти. Насамперед слід розмістити html-код, з яким доведеться працювати.
HTML-код для списків

Після того, як прописали структуру списку, саме час поставити CSS-стилі для цієї справи.
CSS код

table {
width: 500px;
}
select {
border: 1px solid #f2f2f2;
color: #9E9E9E;
padding: 10px;
margin-right: 10px;
}
select option {
padding: 3px 10px;
background: none;
transition: all 0.5 s ease;
cursor: pointer;
}
select option:hover {
background: #fafafa;
}
button {
border: none;
outline: none;
padding: 8px 15px;
border-radius: 25px;
font-size: 14px;
color: #fff;
opacity: 1;
display: block;
transition: all 0.5 s ease;
width: 150px;
margin-bottom: 10px;
cursor-pointer;
}
button:hover {
opacity: 0.8;
}
#add {
background: #8BC34A;
}
#rem {
background: #FF5722;
}
textarea {
border: 1px solid #f2f2f2;
color: #9E9E9E;
padding: 10px 15px;
margin-left: 10px;
line-height: 20px;
}

Як ви можете помітити, обсяг CSS коду досить скромний, що так само вельми радує око. Вся основна робота припадає на код JavaScript.

JavaScript-код

$(document).on(‘change’, ‘#reporttype’, function() {
var value = $(this).val();
var location = $(“#location”);
var employeelist = $(“#employeelist”);
var chosendates = $(“#chosendates”);
var formattype = $(“#formattype”);
var submitbtn = $(“#submitbtn”);
if (value == “checklistreports”) {
location.show();
employeelist.show();
chosendates.show();
formattype.show();
submitbtn.show();
} else if (value == “locationreports”) {
location.show();
employeelist.hide();
chosendates.show();
formattype.show();
submitbtn.show();
} else {
location.hide();
employeelist.hide();
chosendates.hide();
formattype.hide();
submitbtn.hide();
}
});
var opts = document.querySelectorAll(‘#loc option’);
document.getElementById(‘add’).addEventListener. (‘click’, function() {
for (var i = 0; i < opts.length; i++) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById(‘rem’).addEventListener. (‘click’, function() {
for (var i = 0; i < opts.length; i++) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById(‘loc’).addEventListener. (‘change’, reflectChange);
function reflectChange() {
document.getElementById(‘selected’).value = “;
for (var i = 0; i < opts.length; i++) {
if (opts[i].selected)
document.getElementById(‘selected’).value += opts[i].text + ‘\n’;
}
}
var opts1 = document.querySelectorAll(‘#EmployeeName option’);
document.getElementById(‘add1’).addEventListener. (‘click’, function() {
for (var i = 0; i < opts1.length; i++) {
opts1[i].selected = true;
}
reflectChange1();
});
document.getElementById(‘rem1’).addEventListener. (‘click’, function() {
for (var i = 0; i < opts1.length; i++) {
opts1[i].selected = false;
}
reflectChange1();
});
document.getElementById(‘EmployeeName’).addEventListener. (‘change’, reflectChange1);
function reflectChange1() {
document.getElementById(‘selected1’).value = “;
for (var i = 0; i < opts1.length; i++) {
if (opts1[i].selected)
document.getElementById(‘selected1’).value += opts1[i].text + ‘\n’;
}
}

Не забудьте підключити бібліотеку JQuery перед запуском коду скрипта. Нижче опубліковані посилання для демонстрації роботи, а так само архів з попередником.
Приклад | Ісходник

Додав: htmaker, 03.11.2017 р.
(1 голосів, середній: 5,00 з 5)

Завантаження…

Діліться з друзями:

См. також:

Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript

Анімація набору тексту на JQuery плагіні — TypeIt
Рубрика: Html, CSS, Javascript