Форум

sadzeburo · #1 (**permalink**) 06.10.2011, 10:35

Как реализовать синхронное выделение/отмену выделения элементов этих двух списков на JQuery?

<form>
<select name="en[]" multiple='multiple'>
<option value="1">Kiev</option>
<option value="2">Kharkov</option>
</select>

<select name="ru[]" multiple='multiple'>
<option value="1">Киев</option>
<option value="2">Харьков</option>
</select>
</form>

ksa · #2 (**permalink**) 06.10.2011, 10:52

sadzeburo, достаточно синхронно?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('option[value="1"]').attr('selected',true)
})
</script>
</head>
<body>
<form>
	<select name="en[]" multiple='multiple'>
		<option value="1">Kiev</option> 
		<option value="2">Kharkov</option>
	</select>

	<select name="ru[]" multiple='multiple'>
		<option value="1">Киев</option> 
		<option value="2">Харьков</option>
	</select>
</form>
</body>
</html>

sadzeburo · #3 (**permalink**) 06.10.2011, 11:01

Не подходит.

Пользователь сам должен выделить или снять выделение у произвольного кол-ва элементов списка.

через value отпадает, пробовал )

ksa · #4 (**permalink**) 06.10.2011, 11:45

sadzeburo, тогда тут больше вопрос "как отловить событие Ctrl+click?"...

По click можно сделать так...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('select').click(function (){
		var val=$(this).val()
		$('option').attr('selected',false)
		$('option[value="'+val+'"]').attr('selected',true)
	})
})
</script>
</head>
<body>
<form>
	<select name="en[]" multiple='multiple'>
		<option value="1">Kiev</option> 
		<option value="2">Kharkov</option>
	</select>

	<select name="ru[]" multiple='multiple'>
		<option value="1">Киев</option> 
		<option value="2">Харьков</option>
	</select>
</form>
</body>
</html>

sadzeburo · #5 (**permalink**) 06.10.2011, 12:21

здесь несколько загвоздок

1 - при множественном выделении, val() - возвращает массив
2 - если снимаем выделение у элемента val(), возвращает null, тогда нужно смотреть какие в select - option остались выделенными, во всех остальных списках только их выделять. Если не осталось выделенных, снимать выделения эл-тов во всех селектах.

вот как это воедино скрутить... не знаю (

ksa · #6 (**permalink**) 06.10.2011, 13:18

Сообщение от sadzeburo

при множественном выделении, val() - возвращает массив

Это не проблема... Просто чут сложнее "формируется" селектор.

По п.2 ты сам уже написал алгоритм, осталось его только воплотить в жизнь

sadzeburo · #7 (**permalink**) 06.10.2011, 13:43

я в JQUERY как поросенок в апельсинах )))

Но... раз алгоритм имеется, буду пробовать реализовать )))

Спасибо за помощь!!!!

ksa · #8 (**permalink**) 06.10.2011, 13:49

Сообщение от sadzeburo

я в JQUERY как поросенок в апельсинах

Вот тебе кагбэ апельсинчег...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('select').click(function (){
		var a=[]
		$(this).find('option:selected').each(function (){
			a[a.length]=$(this).attr('value')
		})
		$('select').val(a)
	})
})
</script>
</head>
<body>
<form>
	<select name="en[]" multiple='multiple'>
		<option value="1">Kiev</option> 
		<option value="2">Kharkov</option>
	</select>

	<select name="ru[]" multiple='multiple'>
		<option value="1">Киев</option> 
		<option value="2">Харьков</option>
	</select>
</form>
</body>
</html>

sadzeburo · #9 (**permalink**) 06.10.2011, 15:24

Супер!!!!

сейчас буду осмысливать скопипастенное )))

Большое спасибо )))!!!!

Форум

Справочник

Discord чат

Курсы javascript