Как вылечить появление и исчезновение блоков в коде js?
Друзья, есть js.
<div id="f_lr1ro" class="field ft_list"> <label for="lr1ro">Есть ли у вас авто</label><select name="lr1ro" id="lr1ro"> <option value="1">--</option> <option value="2">Есть</option> <option value="3">Нет</option> <option value="4">Не нужно совсем</option> </select> </div> <div id="f_lr1rowtd" class="field ft_list"> <label for="lr1rowtd">Авто</label><select name="lr1rowtd" id="lr1rowtd"> <option value="1">--</option> <option value="2">Ничего не делать</option> <option value="3">окрасить</option> <option value="4">Перебрать/отремонтировать</option> <option value="5">Поменять на легковую</option> <option value="6">Поменять на бус</option> <option value="7">Поменять на мото</option> <option value="8">Поменять на джип</option> <option value="9">Купить на легковую</option> <option value="10">Купить на бус</option> <option value="11">Купить на джип</option> <option value="12">Купить на мото</option> </select> </div> <div id="f_lr1rooq" class="field ft_number"> <label for="lr1rooq">Сколько лет авто</label> <input type="text" class="input input-number" name="lr1rooq" value="" id="lr1rooq" size="5"> </div> <div id="f_lr1ronq" class="field ft_number"> <label for="lr1ronq">Какой пробег нужен</label> <input type="text" class="input input-number" name="lr1ronq" value="" id="lr1ronq" size="5"> </div>
var update = function() {
var val = +$('#f_lr1ro option:selected').val();
var showFirst = [2, 3].indexOf(val) >= 0;
$('#f_lr1rowtd').toggle(showFirst);
};
var update2 = function() {
var val = +$('#f_lr1rowtd option:selected').val();
var showFirst = [3, 4, 5, 6, 7, 8].indexOf(val) >= 0;
var showSecond = [9, 10, 11, 12].indexOf(val) >= 0;
$('#f_lr1rooq').toggle(showFirst);
$('#f_lr1ronq').toggle(showSecond);
};
$(document).ready(function(){
$('#f_lr1ro').change(update);
$('#f_lr1rowtd').change(update2);
update();
update2();
});
Все работает прекрасно, но есть одна оказия, которая не дает радоваться этому коду. Если в первом списке с #f_lr1ro ("Есть ли у вас авто") мы выбрали, например, 2 - "ЕСТЬ" Появляется второй список с #f_lr1rowtd. (АВТО) Тут все в порядке. После того как во втором списке (АВТО), который появился я выбираю, например, 3 - "ОКРАСИТЬ" Появляется поле с #f_lr1rooq (СКОЛЬКО ЛЕТ АВТО)- тут тоже все работает. Когда я в первом списке #f_lr1ro, "2" - "ЕСТЬ" изменяю на "1" "--" Второй список #f_lr1rowtd ("АВТО") исчезает - все как нужно. НО! при этом поле #f_lr1rooq (СКОЛЬКО ЛЕТ АВТО) уже не исчезает. Как я понимаю, это из за того, что в исчезнувшем списке (АВТО) выбрана и сохранена позиция ("ОКРАСИТЬ"), при которой это поле (СКОЛЬКО ЛЕТ АВТО) должно показываться. Как это лечится? |
adash,
1 полноценный макет 2 что хотел сделать с помощью этого кода? |
Цитата:
Хотел сделать зависимость появления и исчезновения блоков в зависимости от выбранных пунктов выпадающего списка. Вот ссылка на пример http://jsfiddle.net/adash/8z51m437/ |
adash,
в конец 4 строки добавить
!showFirst && $('#f_lr1rowtd select').val(1).change();
мысли вслух -- '#f_lr1ro option:selected' и $('#f_lr1ro').change нафига? |
adash,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var update = function() {
var val = +this.value;
var showFirst = [2, 3].indexOf(val) >= 0;
$('#f_lr1rowtd').toggle(showFirst);
!showFirst && $('#f_lr1rowtd select').val(1).change();
};
var update2 = function() {
var val = +this.value;
var showFirst = [3, 4, 5, 6, 7, 8].indexOf(val) >= 0;
var showSecond = [9, 10, 11, 12].indexOf(val) >= 0;
$('#f_lr1rooq').toggle(showFirst);
$('#f_lr1ronq').toggle(showSecond);
};
$('#lr1ro').change(update).change();
$('#lr1rowtd').change(update2).change();
});
</script>
</head>
<body> <div id="f_lr1ro" class="field ft_list">
<label for="lr1ro">Есть ли у вас авто</label><select name="lr1ro" id="lr1ro">
<option value="1">--</option>
<option value="2">Есть</option>
<option value="3">Нет</option>
<option value="4">Не нужно совсем</option>
</select>
</div>
<div id="f_lr1rowtd" class="field ft_list">
<label for="lr1rowtd">Авто</label><select name="lr1rowtd" id="lr1rowtd">
<option value="1">--</option>
<option value="2">Ничего не делать</option>
<option value="3">окрасить</option>
<option value="4">Перебрать/отремонтировать</option>
<option value="5">Поменять на легковую</option>
<option value="6">Поменять на бус</option>
<option value="7">Поменять на мото</option>
<option value="8">Поменять на джип</option>
<option value="9">Купить на легковую</option>
<option value="10">Купить на бус</option>
<option value="11">Купить на джип</option>
<option value="12">Купить на мото</option>
</select>
</div>
<div id="f_lr1rooq" class="field ft_number">
<label for="lr1rooq">Сколько лет авто</label>
<input type="text" class="input input-number" name="lr1rooq" value="" id="lr1rooq" size="5">
</div>
<div id="f_lr1ronq" class="field ft_number">
<label for="lr1ronq">Какой пробег нужен</label>
<input type="text" class="input input-number" name="lr1ronq" value="" id="lr1ronq" size="5">
</div>
</body>
</html>
|
рони,
Замечательно! Огромнейшее спасибо ВАМ!!! А можно узнать, возможно ли сделать так, чтобы в зависимости от выбора одного value из одного списка, value из другого скрывался? Наверное нужно более конкретно. В списке "Есть ли у вас авто" при выборе "Есть" необходимо чтобы в списке "Авто" исчезли <option value="9">Купить на легковую</option> <option value="10">Купить на бус</option> <option value="11">Купить на джип</option> <option value="12">Купить на мото</option> А при выборе "Нет" - <option value="3">окрасить</option> <option value="4">Перебрать/отремонтировать</option> <option value="5">Поменять на легковую</option> <option value="6">Поменять на бус</option> <option value="7">Поменять на мото</option> <option value="8">Поменять на джип</option> |
adash,
можно но неинтересно ищите зависимые селекты по форуму их много |
Ок, буду разбираться. Но на форуме что-то ничего не нашел. Спасибо!
|
|
Темный лес. Ей богу. В php первые шаги только осилил. js код, который выложил - за неделю выстрадал. А с вашими ссылками еще на неделю зависну.
Дело в том, что тяжело догоняю js. М да... В любом случае спасибо. |
Сделал вот таким образом
http://jsfiddle.net/adash/x94okq43/ Но опять есть недочет с которым справиться не могу... при изменении родительского value дочерние исчезают - гуд. но при этом 1. в дочернем списке так и остается выбранное значение. 2. Если раскрыть список и прокрутить с помощью стрелок вверх-вниз те пункты что скрыты равно выбираются. Помогите |
adash,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var $first = $('#lr1ro'),
hide = {2 : $('[data-hide-on="3"]'), 3 : $('[data-hide-on="2"]')},
$targetList = $('#f_lr1rowtd'),$last = $('#lr1rowtd');
var update = function() {
showFirst = [2, 3].indexOf(+this.value) >= 0;
$targetList.toggle(showFirst)
hide[2].add(hide[3]).remove();
showFirst && hide[this.value].appendTo($last);
$last.val(1).change();
};
var update2 = function() {
var val = +this.value;
var showFirst = [3, 4, 5, 6, 7, 8].indexOf(val) >= 0;
var showSecond = [9, 10, 11, 12].indexOf(val) >= 0;
$('#f_lr1rooq').toggle(showFirst);
$('#f_lr1ronq').toggle(showSecond);
};
$first.change(update).change();
$last.change(update2).change();
});
</script>
</head>
<body> <div id="f_lr1ro" class="field ft_list">
<label for="lr1ro">Есть ли у вас авто</label><select name="lr1ro" id="lr1ro">
<option value="1">--</option>
<option value="2">Есть</option>
<option value="3">Нет</option>
<option value="4">Не нужно совсем</option>
</select>
</div>
<div id="f_lr1rowtd" class="field ft_list">
<label for="lr1rowtd">Авто</label><select name="lr1rowtd" id="lr1rowtd">
<option value="1">--</option>
<option value="2">Ничего не делать</option>
<option value="3" data-hide-on="3">окрасить</option>
<option value="4" data-hide-on="3">Перебрать/отремонтировать</option>
<option value="5" data-hide-on="3">Поменять на легковую</option>
<option value="6" data-hide-on="3">Поменять на бус</option>
<option value="7" data-hide-on="3">Поменять на мото</option>
<option value="8" data-hide-on="3">Поменять на джип</option>
<option value="9" data-hide-on="2">Купить на легковую</option>
<option value="10" data-hide-on="2">Купить на бус</option>
<option value="11" data-hide-on="2">Купить на джип</option>
<option value="12" data-hide-on="2">Купить на мото</option>
</select>
</div>
<div id="f_lr1rooq" class="field ft_number">
<label for="lr1rooq">Сколько лет авто</label>
<input type="text" class="input input-number" name="lr1rooq" value="" id="lr1rooq" size="5">
</div>
<div id="f_lr1ronq" class="field ft_number">
<label for="lr1ronq">Какой пробег нужен</label>
<input type="text" class="input input-number" name="lr1ronq" value="" id="lr1ronq" size="5">
</div>
</body>
</html>
|
рони,
Класс, дуду разбираться. Спасибо. ) Кидайте кошелек, не могу не отблагодарить. Как пополню свой переведу вам ) СПАСИБО! _ |
И как всегда: "А нет ли у вас такого же, но без крыльев".
Дело в том, что вмешаться в php код который мог бы добавить к option value data-hide-on="3" возможности нет. Если это единственное решение, тогда я пасую, и благодарю за внимание и помощь. |
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var $first = $('#lr1ro'),$last = $('#lr1rowtd'),
hide = {2 : $('option', $last).slice(2,8), 3 : $('option',$last).slice(8,12)},
$targetList = $('#f_lr1rowtd');
var update = function() {
showFirst = [2, 3].indexOf(+this.value) >= 0;
$targetList.toggle(showFirst)
hide[2].add(hide[3]).remove();
showFirst && hide[this.value].appendTo($last);
$last.val(1).change();
};
var update2 = function() {
var val = +this.value;
var showFirst = [3, 4, 5, 6, 7, 8].indexOf(val) >= 0;
var showSecond = [9, 10, 11, 12].indexOf(val) >= 0;
$('#f_lr1rooq').toggle(showFirst);
$('#f_lr1ronq').toggle(showSecond);
};
$first.change(update).change();
$last.change(update2).change();
});
</script>
</head>
<body> <div id="f_lr1ro" class="field ft_list">
<label for="lr1ro">Есть ли у вас авто</label><select name="lr1ro" id="lr1ro">
<option value="1">--</option>
<option value="2">Есть</option>
<option value="3">Нет</option>
<option value="4">Не нужно совсем</option>
</select>
</div>
<div id="f_lr1rowtd" class="field ft_list">
<label for="lr1rowtd">Авто</label><select name="lr1rowtd" id="lr1rowtd">
<option value="1">--</option>
<option value="2">Ничего не делать</option>
<option value="3" >окрасить</option>
<option value="4" >Перебрать/отремонтировать</option>
<option value="5" >Поменять на легковую</option>
<option value="6" >Поменять на бус</option>
<option value="7" >Поменять на мото</option>
<option value="8" >Поменять на джип</option>
<option value="9" >Купить на легковую</option>
<option value="10" >Купить на бус</option>
<option value="11" >Купить на джип</option>
<option value="12" >Купить на мото</option>
</select>
</div>
<div id="f_lr1rooq" class="field ft_number">
<label for="lr1rooq">Сколько лет авто</label>
<input type="text" class="input input-number" name="lr1rooq" value="" id="lr1rooq" size="5">
</div>
<div id="f_lr1ronq" class="field ft_number">
<label for="lr1ronq">Какой пробег нужен</label>
<input type="text" class="input input-number" name="lr1ronq" value="" id="lr1ronq" size="5">
</div>
</body>
</html>
|
:dance: :dance: :dance: :dance: :dance: :dance: :dance: :dance: :dance: :dance:
|
Продолжаю изучение js
Возник вопрос. При использовании метода .slice возможно ли вернуть конкретный элемент? Например 2-й и 6-й? |
adash,
.eq(1) .eq(5) |
Видно где-то допустил ошибку.
Логика такова. при выборе 3-го значение в родительском списке - в дочернем показываются только 2 и 6.
$(function() {
var $first = $('#lr1dp'),$last = $('#lr1dpwt'),
hide = {3 : $('option', $last).eq(1).eq(5)},
$targetList = $('#f_lr1dpwt');
var update90 = function() {
showFirst = [2, 3].indexOf(+this.value) >= 0;
$targetList.toggle(showFirst)
hide[3].remove();
showFirst && hide[this.value].appendTo($last);
$last.val(1).change();
};
$first.change(update90).change();
});
Где я недопонимаю языка? |
adash,
$('option', $last).eq(1).add($('option', $last).eq(5)) но лучше filter для таких операций |
adash,
$('option', $last).filter(function(i){
return i == 1 || i == 5;
})
|
рони,
Получилось, работает, но такое ощущение, что я индус...
$(function() {
var $first = $('#lr1dp'),$last = $('#lr1dpwt'),
hide = {2 : $('option', $last).slice(), 3 : $('option', $last).filter(function(i){
return i == 0 || i == 1 || i == 5;
})
},
$targetList = $('#f_lr1dpwt');
var update90 = function() {
showFirst = [2, 3].indexOf(+this.value) >= 0;
$targetList.toggle(showFirst)
hide[2].add(hide[3]).remove();
showFirst && hide[this.value].appendTo($last);
$last.val(1).change();
};
$first.change(update90).change();
});
Можно ли использовать такую конструкцию? |
Цитата:
|
Охо... просмотрел. Спасибо )
Всего 7 значений у меня. Значит оставить все их.
2 : $('option', $last).slice(0,7)
|
js весчь ОаднакА
|
| Часовой пояс GMT +3, время: 17:09. |