Динамическое включение/отключение option
Доброго всем!
Нужна помощь. Есть 18 select'ов. Набросал скрипт, который динамически отключает/включает option в остальных селектах при его выборе в одном. При тестировании option'ы включаются/отключаются как-то рандомно. Листинг кода на примере 3-х селектов:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$('.my_select').change(function() {
var arr_ext = ['row', 'col'];
var cur_val = $(this).val()*1;
var cur_id = $(this).attr('id').substr(8)*1;
var prev = $(this).data('prev')*1;
var info = "";
var sel_obj_cnt = $('.my_select').length;
if (cur_val > 0) {
for (var i=1; i<=sel_obj_cnt; i++) {
if (('selector'+cur_id) != $('select#selector'+i).attr('id')) {
$("#selector"+i+" option[value='"+cur_val+"']").attr('disabled', true);
info +='selector'+i+' disabled value ' + cur_val + '\n';
};
};
};
if (prev > 0) {
for (var i=1; i<=sel_obj_cnt; i++) {
if (('selector'+cur_id) != $('#selector'+i).attr('id')) {
$("#selector"+i+" option[value='"+prev+"']").removeAttr('disabled');
info +='selector'+i+' enabled value ' + prev + '\n';
};
};
};
$(this).data('prev', cur_val);
//alert(info);
});
</script>
</head>
<body>
<table>
<thead><tr><th>Выбор по строкам</th><th>Выбор по столбцам</th></tr></thead>
<tbody>
<tr><td><select class='my_select' id='selector1'>
<option selected>--Ничего не выбрано--</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select></td>
<td><select class='my_select' id='selector4'>
<option selected>--Ничего не выбрано--</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select></td></tr>
<tr><td><select class='my_select' id='selector2'>
<option selected>--Ничего не выбрано--</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select></td>
<td><select class='my_select' id='selector5'>
<option selected>--Ничего не выбрано--</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select></td></tr>
<tr><td><select class='my_select' id='selector3'>
<option selected>--Ничего не выбрано--</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select></td>
<td><select class='my_select' id='selector6'>
<option selected>--Ничего не выбрано--</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select></td></tr>
</tbody></table>
</body>
</html>
|