Javascript-форум - Как сделать multiple

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как сделать multiple (https://javascript.ru/forum/misc/70578-kak-sdelat-multiple.html)

Как сделать multiple

Как сделать такой multiple

Чтобы при переносе, данные все равно оставались?

Где "Точки маршрута".

Нужно, чтобы нажал на ЮТК и перенес в другую таблицу, а в этой осталось.

Берешь, выбираешь элемент. Нажимаешь "добавить" и в этот момент переноситься в другой select, но откуда добавлено было, остается.

Это набросок на первый случай )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
</head>
<body>

	<div class="multi">
		<div id="list"></div>
		<div>
			<span class="btn" onclick="multi();"><<<</span>
		</div>
		<div class="points">
			<ul class='list'>
				<li class="li">lorem1</li>
				<li class="li">lorem2</li>
				<li class="li">lorem3</li>
				<li class="li">lorem4</li>
				<li class="li">lorem5</li>
				<li class="li">lorem6</li>
				<li class="li">lorem7</li>
				<li class="li">lorem8</li>
				<li class="li">lorem9</li>
				<li class="li">lorem10</li>
			</ul>
		</div>
	</div>

	<script>
		var activ;

		window.onload = function(){
			var items = document.querySelectorAll('.list .li');

			for(var i = 0; i < items.length; i++){
				items[i].onclick = activeItem;
			}
			function activeItem(){
				this.classList.toggle('active');
				activ = this.innerHTML;
			}

		}
		function multi(){
			var div = document.createElement('li');
			div.className = 'li';
			div.innerHTML = activ;
			list.appendChild(div);
		}
	</script>


	<style>
	body, html{
		min-height: 100%;
		height: 100%;
		margin:0;
	}
	.multi{
		height: 100%;
		width: 800px;
		margin:0 auto;
	}
	.multi div{height: 100%;
		float:left;
		width: 33%;
		border-right: 1px  solid #ccc;
	}
	.list li{
		padding:10px;
		cursor:pointer;
	}
	.list li:hover{
		background: #ccc;
	}
	.btn{
		padding:10px;
		margin:40px;
		background: #f1f1f1;
		border:1 px solid #ccc;
		border-radius:5px;
		display:block;
	}
	.btn:hover{
		background: #ccc;
		cursor:pointer;
	}
	.active{
		background: #ccc;
		color:blue;
	}
</style>
</body>
</html>

Вполне могу. Что сложного в этом?

void(),
Спасибо.

Я конечно все понимаю, но что от тебя за негатив? Мне нужен был принцип, а не размета. А ты я смотрю можешь только критиковать.

void(),
А как мне удалять по кнопке?