На странице есть select.
При выборе его option - появляется текстовое поле. По событию onClick на нем - появляется второй селект. Но. В нем выбранный в первом селекте option в состоянии disabled.
Далее повторяется. Выбираем опшен во втором селекте - появляется текстовое поле, начинаем в нем писать - появляется третий селект. И точно так же с четвертым селектом.
Проблема вот в чем. Я заблокировала один опшен, в третьем селекте нужно заблокировать два опшена - один, который мы выбрали в первом селекте, второй - что выбрали во втором. В четвертом нужно заблокировать три опшена. Как это сделать? Подскажите, пожалуйста.
<script>
function hide_show(id)
{
document.getElementById(id).style.display = "block";
}
function disabl(id)
{
document.getElementById(id).style.display = "block";
selIdx = document.forms[0].bonus.selectedIndex;
newSel = document.forms[0].bonus.options[selIdx].value;
document.forms[0].bonus2.options[newSel].disabled=true;
}
</script>
</head>
<body>
<form action='' method='post' name="b">
<select id="bonus" name="bonus" onChange="hide_show('textfield');">
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input style="display:none;" type='text' id='textfield' name='textfield' onclick='disabl("bonus2");'>
<select id="bonus2" name="bonus2" onChange="hide_show('textfield2');" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield2' name='textfield2' style="display:none;" onclick='disabl("bonus3");'>
<select id="bonus3" name="bonus3" onChange="hide_show('textfield3');" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield3' name='textfield3' style="display:none;" onclick='disabl("bonus4");'>
<select id="bonus4" name="bonus4" onChange="hide_show('textfield4');" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield4' name='textfield4' style="display:none;">
</form>
</body>
Спустя 10 часов, 40 минут, 11 секунд (21.10.2011 - 09:29) sharki написал(а):
Проанализируй :)
<script>
var arr = []; // тут будет коллекция выбранных раннее эл-тов
function hide_show(id,obj) {
document.getElementById(id).style.display = "block";
selIdx = obj.selectedIndex;
newSel = obj.options[selIdx].value;
arr.push(newSel);
// alert(Dump(arr,5));
}
function disabl(id) {
var el = document.getElementById(id);
el.style.display = "block";
for (var i = 0; i < arr.length; i++) {
el.options[arr[i]].disabled=true;
}
}
// посмотреть объект\массив
function Dump(d,l) {
if (l == null) l = 1;
var s = '';
if (typeof(d) == "object") {
s += typeof(d) + " {\n";
for (var k in d) {
for (var i=0; i<l; i++) s += " ";
s += k+": " + Dump(d[k],l+1);
}
for (var i=0; i<l-1; i++) s += " ";
s += "}\n"
}else {
s += "" + d + "\n";
}
return s;
}
</script>
</head>
<body>
<form action='' method='post' name="b">
<select id="bonus" name="bonus" onChange="hide_show('textfield',this);">
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input style="display:none;" type='text' id='textfield' name='textfield' onclick='disabl("bonus2");'>
<select id="bonus2" name="bonus2" onChange="hide_show('textfield2',this);" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield2' name='textfield2' style="display:none;" onclick='disabl("bonus3");'>
<select id="bonus3" name="bonus3" onChange="hide_show('textfield3',this);" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield3' name='textfield3' style="display:none;" onclick='disabl("bonus4");'>
<select id="bonus4" name="bonus4" onChange="hide_show('textfield4',this);" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield4' name='textfield4' style="display:none;">
</form>
</body>
Спустя 12 часов, 58 минут, 19 секунд (21.10.2011 - 22:27) Лена написал(а):
Спасибо. Зашла уже зарегистрированная, а то на работе впопыхах пароль забыла указать.
До arr и arr.push я додумалась, но у меня код кривее, чем у вас получился, и вот до использования obj не додумалась.
Мне задачу усложнили. Добавили еще один селект. С двумя группами. Используя ваш код, у меня получилось вот что:
Честно говоря, не знаю, как сделать двухуровневый массив arr[1][2] - если выбрана первая группа и во втором селекте второй элемент - сделать его неактивным. Если выбрана вторая группа и второй элемент - он активный.
Т.е. надо заблокировать второй селект определенной группы.
У меня на странице получается, будет 8 таких блоков селектов:
селект-группа, селект-элемент + текстовое поле.(описала один селект). Наверное, в php загоню в цикл, когда с disabled разберусь.
До arr и arr.push я додумалась, но у меня код кривее, чем у вас получился, и вот до использования obj не додумалась.
Мне задачу усложнили. Добавили еще один селект. С двумя группами. Используя ваш код, у меня получилось вот что:
<script>
var arr = []; // тут будет коллекция выбранных раннее эл-тов
function hide_show(id,obj) {
document.getElementById(id).style.display = "block";
selIdx = obj.selectedIndex;
newSel = obj.options[selIdx].value;
arr.push(newSel);
//alert(Dump(arr,5));
}
function disabl(group,id) {
var gr = document.getElementById(group);
gr.style.display = "block";
var el = document.getElementById(id);
el.style.display = "block";
for (var i = 0; i < arr.length; i++) {
el.options[arr[i]].disabled=true;
}
}
// посмотреть объект\массив
function Dump(d,l) {
if (l == null) l = 1;
var s = '';
if (typeof(d) == "object") {
s += typeof(d) + " {\n";
for (var k in d) {
for (var i=0; i<l; i++) s += " ";
s += k+": " + Dump(d[k],l+1);
}
for (var i=0; i<l-1; i++) s += " ";
s += "}\n"
}else {
s += "" + d + "\n";
}
return s;
}
</script>
</head>
<body>
<form action='' method='post' name="b">
<select id="group" name="group">
<option value="Empty">выбрать...</option>
<option value="1">группа1</option>
<option value="2">группа2</option>
</select>
<select id="bonus" name="bonus" onChange="hide_show('textfield',this);">
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input style="display:none;" type='text' id='textfield' name='textfield' onclick='disabl("group2","bonus2");'>
<select id="group2" name="group2" style="display:none;">
<option value="Empty">выбрать...</option>
<option value="1">группа1</option>
<option value="2">группа2</option>
</select>
<select id="bonus2" name="bonus2" onChange="hide_show('textfield2',this);" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield2' name='textfield2' style="display:none;" onclick='disabl("group3","bonus3");'>
<select id="group3" name="group3" style="display:none;">
<option value="Empty">выбрать...</option>
<option value="1">группа1</option>
<option value="2">группа2</option>
</select>
<select id="bonus3" name="bonus3" onChange="hide_show('textfield3',this);" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield3' name='textfield3' style="display:none;" onclick='disabl("group4","bonus4");'>
<select id="group4" name="group4" style="display:none;">
<option value="Empty">выбрать...</option>
<option value="1">группа1</option>
<option value="2">группа2</option>
</select>
<select id="bonus4" name="bonus4" onChange="hide_show('textfield4',this);" style="display:none;" >
<option value="Empty">выбрать...</option>
<option value="1">элемент1</option>
<option value="2">элемент2</option>
<option value="3">элемент3</option>
<option value="4">элемент4</option>
</select>
<input type='text' id='textfield4' name='textfield4' style="display:none;">
</form>
</body>
Честно говоря, не знаю, как сделать двухуровневый массив arr[1][2] - если выбрана первая группа и во втором селекте второй элемент - сделать его неактивным. Если выбрана вторая группа и второй элемент - он активный.
Т.е. надо заблокировать второй селект определенной группы.
У меня на странице получается, будет 8 таких блоков селектов:
селект-группа, селект-элемент + текстовое поле.(описала один селект). Наверное, в php загоню в цикл, когда с disabled разберусь.
Спустя 9 минут, 52 секунды (21.10.2011 - 22:37) sharki написал(а):
Немного запутанно, если выбрана первая группа, надо заблочить выбор второй группы? и наоборот?
Или выбранная первая группа то все выбранные далее селекты, должны быть принадлежать и заблокированы только этой первой группе? И так же со второй?
Или выбранная первая группа то все выбранные далее селекты, должны быть принадлежать и заблокированы только этой первой группе? И так же со второй?
Спустя 12 минут, 34 секунды (21.10.2011 - 22:50) Лена написал(а):
Выбрана первая группа, то все выбранные далее селекты должны принадлежать и заблокированы только этой первой группе.
Мы взяли группу 1. Выбрали в ней элемент 2. Записали в текстовое поле значение.
Появилась вторая группа селектов.
В ней я выбираю снова группу 1. Во втором селекте я вижу, что элемент 2 уже заблокирован.
Если бы здесь в первом селекте я выбрала группу 2 и элемент 2 - он активный.
Т.е. блокировка идет только для данной группы.
Вот я и придумала все это в двухуровневый массив сложить:
Если есть элемент массива arr[1][2] - значит 1 группа, 2 элемент - заблокировать.
Ну надеюсь, теперь понятно... Могу еще подробней объяснить.
Мы взяли группу 1. Выбрали в ней элемент 2. Записали в текстовое поле значение.
Появилась вторая группа селектов.
В ней я выбираю снова группу 1. Во втором селекте я вижу, что элемент 2 уже заблокирован.
Если бы здесь в первом селекте я выбрала группу 2 и элемент 2 - он активный.
Т.е. блокировка идет только для данной группы.
Вот я и придумала все это в двухуровневый массив сложить:
Если есть элемент массива arr[1][2] - значит 1 группа, 2 элемент - заблокировать.
Ну надеюсь, теперь понятно... Могу еще подробней объяснить.