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

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

<table border="0" cellpadding="0" cellspacing="15">
  <tr>
    <td id="location"><select name="Location" id="loc" multiple="multiple" required size="9">
        <option value="Almaty">Алма-Ата</option>
        <option value="Astana">Астана</option>
        <option value="Shymkent">Шымкент</option>
        <option value="Karaganda">Караганда</option>
        <option value="Aktobe">Актобе</option>
        <option value="Taraz">Тараз</option>
        <option value="Pavlodar">Павлодар</option>
        <option value="Ust-Kamenogorsk">Усть-Каменогорск</option>
        <option value="Semey">Семей</option>
      </select></td>
    <td><button id="add" type="button">Добавить все</button>
      <button id="rem" type="button">Удалить все</button></td>
    <td><textarea id="selected" rows="10" readonly></textarea></td>
  </tr>
</table>

После того, как прописали структуру списка, самое время задать 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.5s 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.5s 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 перед запуском кода скрипта. Ниже опубликованы ссылки для демонстрации работы, а так же архив с исходником.
Пример | Исходник