Как правильно оформить js, отвечающего за выпадающие списки?

Question

[amazinginternetsites]

Здравствуйте, друзья.

Суть вопроса такова:
1. Возможно ли оптимизировать код?
2. Каким образом прописать зависимость показа определенного value относящегося к одному списку от value другого?

А вот сам скрипт. Все бы ничего, но таких зависимостей огромная куча.

$(document).ready(function(){
		$('#f_lr1rowtd option:selected').each(function () {
			if($(this).val() == '1') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '2') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '3') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '4') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '5') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '6') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '7') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '8') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '9') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').show();
			}
			else if($(this).val() == '10') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').show();
			}
			else if($(this).val() == '11') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').show();
			}else if($(this).val() == '12') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').show();
			}
		});
	});
	
	$('#f_lr1rowtd').change(function () {
		$('#f_lr1rowtd option:selected').each(function () {
			if($(this).val() == '1') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '2') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '3') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '4') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '5') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '6') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '7') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '8') {
				$('#f_lr1rooq').show();
				$('#f_lr1ronq').hide();
			}
			else if($(this).val() == '9') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').show();
			}
			else if($(this).val() == '10') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').show();
			}
			else if($(this).val() == '11') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').show();
			}else if($(this).val() == '12') {
				$('#f_lr1rooq').hide();
				$('#f_lr1ronq').show();
			}

Спасибо.

Answer 1

[Андрей]

Как минимум можно не искать каждый раз $(this).val()

Насколько я понял по коду, тут участвуют всего два элемента, поэтому просто опишите когда показывается один, и когда второй.

var val = +$(this).val(); // значения ведь числа?

// массивы подставьте свои
var showFirst = [1, 4, 6, 7].indexOf(val) >= 0; 
var showSecond = [2, 3, 4, 8].indexOf(val) >= 0;
$('#f_lr1rooq').toggle(showFirst);
$('#f_lr1ronq').toggle(showSecond);

upd:
Собственно в этом тоже никакого смысла

$('#f_lr1rowtd option:selected').each(function () { ... }

Можно убрать, и сделать так:

var val = +$('#f_lr1rowtd option:selected').val();
// дальше логика выше

Comments

[amazinginternetsites]

Замечательно работает. Спасибо. Сократил таким образом.
$(document).ready(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);
});

$('#f_lr1rowtd').change(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);
});

Вы верно подметили насчет 2-х и более элементов.
Дело в том, что есть еще один список #f_lr1ro.
Так вот, в зависимости от его значения, необходимо чтобы вызывался/показывался список #f_lr1rowtd (который фигурирует выше)...
... а так же в зависимости от значений #f_lr1ro не показывались некоторые значения в самом выпадающем списке #f_lr1rowtd.

Надеюсь вы меня поняли. Спасибо еще раз за помощь.

[Андрей]

Теперь видно, у вас один и тот же код повторяется дважды, строчка в строчку. Лучше всего избегать любого дублирования, выносите его в отдельную функцию.

$(document).ready(update);
$('#f_lr1rowtd').change(update);

function update() {
...
}

[amazinginternetsites]

Андрей: Вы помогли сократить код со 104 до 8 строк. Спасибо. Слов нет. Одни благодарности.

$(document).ready(update);
$('#f_lr1rowtd').change(update);
function update() {
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); };

Верно?

[amazinginternetsites]

По аналогии, которую с вашим решением, попытался сделать следующее

$(document).ready(update);
$('#f_lr1ro').change(update);
function update() {
var val = +$('#f_lr1ro option:selected').val();
var showFirst = [2, 3].indexOf(val) >= 0;
$('#f_lr1rowtd').toggle(showFirst); };

Но безрезультатно, в чем неверность решения? Как понимаю, данная конструкция для одного элемента не приемлема?

[Андрей]

Попробуйте отдебажить.
Самое простое — расставить console.log() по коду.
Более продвинуто — расставить брекпоинты в инструментах разработчика или фаербаге.

[amazinginternetsites]

После кода поставил console.log($('f_lr1ro'));

Вывел. Следующее.

[prevObject: x.fn.x.init[1], context: document, selector: "f_lr1ro", jquery: "1.10.2", constructor: function…]
context: document
length: 0
prevObject: x.fn.x.init[1]
selector: "f_lr1ro"
__proto__: Object[0]

Что такое - науке неизвестно