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> |
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>
|
Не подходит.
Пользователь сам должен выделить или снять выделение у произвольного кол-ва элементов списка. через value отпадает, пробовал ) |
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>
|
здесь несколько загвоздок
1 - при множественном выделении, val() - возвращает массив 2 - если снимаем выделение у элемента val(), возвращает null, тогда нужно смотреть какие в select - option остались выделенными, во всех остальных списках только их выделять. Если не осталось выделенных, снимать выделения эл-тов во всех селектах. вот как это воедино скрутить... не знаю ( |
Цитата:
По п.2 ты сам уже написал алгоритм, осталось его только воплотить в жизнь ;) |
я в 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>
|
Супер!!!!
сейчас буду осмысливать скопипастенное ))) Большое спасибо )))!!!! |
| Часовой пояс GMT +3, время: 09:09. |