Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   JQUERY - как сделать синхронный выбор/отмену выбора, в нескольких селектах формы (https://javascript.ru/forum/jquery/22094-jquery-kak-sdelat-sinkhronnyjj-vybor-otmenu-vybora-v-neskolkikh-selektakh-formy.html)

sadzeburo 06.10.2011 09:35

JQUERY - как сделать синхронный выбор/отмену выбора, в нескольких селектах формы
 
Как реализовать синхронное выделение/отмену выделения элементов этих двух списков на 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 06.10.2011 09: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 06.10.2011 10:01

Не подходит.

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

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

ksa 06.10.2011 10: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 06.10.2011 11:21

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

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

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

ksa 06.10.2011 12:18

Цитата:

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

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

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

sadzeburo 06.10.2011 12:43

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

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

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

ksa 06.10.2011 12: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 06.10.2011 14:24

Супер!!!!

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

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


Часовой пояс GMT +3, время: 07:03.