Непересекающиеся выпадающие списки
Что-то я все больше рассказываю о какой-то чепухе, навроде динамического создания полей в форме и совсем отошел от высокого — шаблонов проектирования. И эта статья к сожалению тоже не про них :( На этот раз я собираюсь рассказывать про selectbox’ы.
Для примера возьмем два selectbox’а и попробуем выбрах в них интервал времени. Допустим нам надо выбрать два месяца, да так чтоб месяц выбранный в первом шел раньше чем месяц выбранный во втором. Один и тот же месяц тоже желательно не выбирать, поэтому в первом нельзя выбрать декарь, а во втором — январь. И последние условие: если в первом selectbox’е выбрали месяц который идет после месяца, выбранного во втором, то во втором надо отметить месяц идущий за тем который выбрали в первом. В общем масло сливочное с растительным жареное на сале и маргарине, но я надеюсь вы поняли.
Итак нам как всегда понадобиться jQuery и немного уличной магии.
jQuery().ready(function($){
$("select[name=first]").change(function(){
var val = $(":selected",this).val(),
col = $("select[name=second] option");
col.show().each(function(){
if ($(this).val() <= val)
$(this).hide();
})
if(!col.filter(":selected").is(":visible"))
col.filter(":visible:first").attr({selected:"selected"});
}).change().find(":last").hide();
});
UPD Вообще у меня в хорошей традиции на следующий день после написания статьи вносить правки. Вот так и сегодня, я посмотрел свое творение под оперой и ослом и понял что надо что-то менять. Итак окончательный вариант:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Непересекающиеся выпадающие списки</title>
<script src="jquery-1.3.2.js"></script>
<script>
jQuery().ready(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'});
});
</script>
</head>
<body>
<form action="">
<select name="first">
<option value="101">Январь</option>
<option value="102">Февраль</option>
<option value="103">Март</option>
<option value="104">Апрель</option>
<option value="105">Май</option>
<option value="106">Июнь</option>
<option value="107">Июль</option>
<option value="108">Август</option>
<option value="109">Сентябрь</option>
<option value="110">Октябрь</option>
<option value="111">Ноябрь</option>
<option value="112">Декабрь</option>
</select>
<select name="second">
<option value="101">Январь</option>
<option value="102">Февраль</option>
<option value="103">Март</option>
<option value="104">Апрель</option>
<option value="105">Май</option>
<option value="106">Июнь</option>
<option value="107">Июль</option>
<option value="108">Август</option>
<option value="109">Сентябрь</option>
<option value="110">Октябрь</option>
<option value="111">Ноябрь</option>
<option value="112">Декабрь</option>
</select>
</form>
</body>
</html>
PS: хотя может стоило статью позиционировать как мануал по использованию псевдоселекторов?..
Комментарии:
Нету комментариев для вывода...