Как сделать появление/исчезновение блоков js?

Question

[amazinginternetsites]

Друзья, есть списки и поля.

<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 (СКОЛЬКО ЛЕТ АВТО) уже не исчезает.
Как я понимаю, это из за того, что в исчезнувшем списке (АВТО) выбрана и сохранена позиция ("ОКРАСИТЬ"), при которой это поле (СКОЛЬКО ЛЕТ АВТО) должно показываться. Как это лечится?

Чтоб проще было вот ссылка на пример jsfiddle.net

Comments

[olamedia .]

подумать-попробовать не пробовали? это уже какой вопрос подряд? если вам нужно только финальное решение, а учиться не хотите, почему бы не пойти на freelansim?

[amazinginternetsites]

olamedia .: Подумал, попробовал. Получилось. Спасибо за внимание ).
В своем ответе я написал реализацию.
Достаточно было добавить 1 строку.

Answer 1

[Андрей]

Так вот что ваш код делает! Уже три раза встречаю его в вопросах.

Собственно у вас в коде полная каша в названиях.
Дайте переменным и функциям более понятные имена, и тогда увидите, что когда вы меняете верхний селект, у вас нигде не написано что первое поле нужно скрыть.

Добавил вам пару строк
jsfiddle.net/ngppeq3v

Comments

[amazinginternetsites]

Я уж думал вы уже не ответите ) спасибо, скчас гляну

[amazinginternetsites]

Андрей, в данном случае работает. При изменении на "--" действительно исчезает. Но если изменить снова с "--" на "Есть" - появляется список "АВТО", а вот поле "Сколько лет авто" нет.

[Андрей]

Утро вечера мудренее.

[amazinginternetsites]

Андрей: Спасибо

Answer 2

[amazinginternetsites]

Отредактировал скрипт, теперь все норм. Работает.
Кажется это называется зависимые списки.

$(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();
     });

Не могу реализовать чтобы в зависимости от выбранного 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>

Comments

[olamedia .]

без html не понятно дальше, список это li/select/checkbox/radio? value - это select option или вы так что-то другое называете.

[amazinginternetsites]

olamedia .: Извините, даже не заметил, что просто текст вставил.

[amazinginternetsites]

А вся html конструкция в первом посте

[olamedia .]

amazinginternetsites: я бы не парился и сделал логику на сервере - все равно проверять там придется результат, при выборе одного - подтягивать аяксом следующий селект. (сделать вложенные контейнеры соответственно зависимостям). если все же дублировать логику на клиенте - то можно сделать массивы/объекты с этими значениями, и селекты строить с нуля при выборе - проще чем делать выбор, что скрывать/показывать.

[amazinginternetsites]

Да, я думал об этом, такая реализация хороша. Но особенности CMS таковы, что списки уже созданы в том виде в котором имеются. И ради небольшого дополнения переписывать совсем не хочется...