Динамический select
Привет всем, надеюсь на Вашу помощь.
Имеем допустим три селекта, каждый селект имеет свой id, допустим от 1 до 3. В каждом селекте имеем 6 опций, например цифры от 0 до 5. Задача состоит в том чтобы при выборе в 1 селекте допустим цифру 3, она должна стать недоступной в остальных двух. Далее выбирая в 3 селекте цифру 2, она так же в остальных должна стать недоступной. Если же мы в 1 селекте возвращаем цифру 0, которая по умолчанию выбрана(selected), то цифра 3 должна стать доступной во всех селектах снова. Добавлю так же что селекты генерируются динамически через php и соответсвенно изначально количество селектов неизвестно, потому как их количество зависит от количества записей в БД. Знаю что надо с функцией onchange, однако сам не осилю, поскольку в javascript не разбираюсь достаточно. Находил кучу описаний как связывать селекты, но там чаще односторонняя связь. Знаю что есть вариант генерации самих селектов при помощи javascript, поэтому обратился к Вам уважаемые гуру. <FORM ACTION='/index.php' METHOD='POST'> <select id="mySelectId[1]" name="numer[1]"> <option value='0' selected>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> </select> <br> <select id="mySelectId[2]" name="numer[2]"> <option value='0' selected>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> </select> <br> <select id="mySelectId[3]" name="numer[3]"> <option value='0' selected>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> </select> |
Цитата:
<!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').change(function (){
var o=$(this);
if (this.value!=0) {
$('option[value="'+this.value+'"]').attr({
disabled: 'true'
});
};
$('option[value="'+o.data('val')+'"]').removeAttr('disabled');
o.data('val',this.value);
});
});
</script>
</head>
<body>
<FORM>
<select id="mySelectId[1]" name="numer[1]" data-val='0'>
<option value='0'>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<br />
<select id="mySelectId[2]" name="numer[2]" data-val='0'>
<option value='0'>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<br />
<select id="mySelectId[3]" name="numer[3]" data-val='0'>
<option value='0'>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</form>
</body>
</html>
|
Спасибо огромное. Хороший пример. Но видать я неверно объяснил задачу, надо было наверное написать, не просто недоступен, а исчезает из списка, знаю что такое возможно и видел? Если же муторно такое написать, то воспользуюсь Вашим примером. Почему нужно что-бы исчезали цифры, потому что в каждом селекте по 99 цифр и таких селектом может быть до 40 штук. Пользователю будет не совсем удобно, если по прежнему придётся пролистывать весь список селекта. Спасибо заранее за помощь.
|
В общем без jQuery довольно жестко получается )
<form action='/index.php' method='POST'>
<select id="mySelectId[1]" name="numer[1]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<br>
<select id="mySelectId[2]" name="numer[2]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<br>
<select id="mySelectId[3]" name="numer[3]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</form>
<script>
(function(){
var selects = [];
for (var i = 0; i < 3; i++) {
var select = document.getElementById('mySelectId['+(i+1)+']');
select.onchange = (function(i) {
return function() {selectHandler.call(this, i)}
})(i);
selects[i] = {
element: select,
value: select.value
}
}
function toggleOption(select, map) {
for (var i = 0, option; option = select[i]; i++) {
if (option.value in map) {
option.style.display = (map[option.value] ? '' : 'none');
}
}
}
function selectHandler(index) {
var optionMap = {};
optionMap[selects[index].value] = 1;
if (this.value != 0) {
optionMap[this.value] = 0;
}
for (var i = 0, select; select = selects[i]; i++) {
if (this != select.element) {
toggleOption(select.element, optionMap);
}
}
selects[index].value = this.value;
}
})();
</script>
|
danik.js извините но Ваш пример работает точно так же как и пример от ksa, как я писал выше нужно чтобы опции(цифры) исчезали и появлялись обратно. Но всё равно огромное спасибо за Ваши примеры.
|
Изменил скрипт. Если селектов много, то возможно вариант с jQuery будет шустрее работать, так как использует выборку по селектору, а не итерацию по всем опшнам.
|
О Вы гений!
|
| Часовой пояс GMT +3, время: 23:26. |