Непересекающиеся выпадающие списки

Что-то я все больше рассказываю о какой-то чепухе, навроде динамического создания полей в форме и совсем отошел от высокого — шаблонов проектирования. И эта статья к сожалению тоже не про них :( На этот раз я собираюсь рассказывать про selectbox’ы.

Для примера возьмем два selectbox’а и попробуем выбрах в них интервал времени. Допустим нам надо выбрать два месяца, да так чтоб месяц выбранный в первом шел раньше чем месяц выбранный во втором. Один и тот же месяц тоже желательно не выбирать, поэтому в первом нельзя выбрать декарь, а во втором — январь. И последние условие: если в первом selectbox’е выбрали месяц который идет после месяца, выбранного во втором, то во втором надо отметить месяц идущий за тем который выбрали в первом. В общем масло сливочное с растительным жареное на сале и маргарине, но я надеюсь вы поняли.

Итак нам как всегда понадобиться jQuery и немного уличной магии.




jQuery(function ($) {
	$("select[name=first]").change(function () {
		var val = $(":selected", this).val(),
			col = $("select[name=second] option");
		col.removeAttr("disabled").each(function () {
			if ($(this).val() <= val) {
				$(this).attr({disabled: 'disabled'});
			}
		});
		if (col.filter(":selected").is(":disabled")) {
			col.filter(":enabled:first").attr({selected: "selected"});
		}
	}).change().find(":last").attr({disabled: 'disabled'});
});

PS: хотя может стоило статью позиционировать как мануал по использованию псевдоселекторов?..

5 Комментарии “Непересекающиеся выпадающие списки

  1. Почему нельзя «Январь-Январь»? Я юзал подобное в одном проекте, только мне еще надо было там подгружать инфу ajax’ом, там типа в зависимости от марки надо было подгрузить модели… А так же были месяцы, только я не хайдил их, а просто не выводил…

  2. Если тебе нужен «Январь-Январь» поменяй «<=» на «<» и убери «.find(«:last»).hide()». Просто мне для сравнения не нужны были одинаковые месяцы.

Комментарии закрыты