Логин:   Пароль:




Новости
Рассылки
Форум
Поиск


Java
- Апплеты
- Вопрос-ответ
- Классы
- Примеры
- Руководства
- Статьи
- IDE
- Словарь терминов
- Скачать

Мобильная Java
- Игры
- Примеры
- Статьи
- WAP, WML и пр.

JavaScript
- Вопрос-ответ
- Примеры
- Статьи

Веб-мастеринг
- HTML
- CSS
- SSI

Разминка для ума
Проекты
Книги
Ссылки
Программы
Юмор :)




Rambler's Top100

JavaScript: ПримерыДинамическое раскрывающееся меню(второе меню зависит от выбора в первом)

Динамическое раскрывающееся меню(второе меню зависит от выбора в первом)

Двойное выпадающее меню, в первом выбирается, месяц, во втором - в зависимости от выбора в первом - день. И по нажатию кнопки осуществляется переход на нужную страничку.

Выберите месяц:

Выберите день:

Вот исходный код данного примера:


<html;>
<head;>
<script; language="javascript">
<!-- hide jscript from old browsers 

//------------------------------------------
//Задаём массив содержащий названия месяцев

monthArray=new Array("Январь","Февраль","Март","Апрель","Май",
"Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь");

//------------------------------------------
//Задаём массив содержащий количество дней в конкретном месяце

dayArray=new Array(31,28,31,30,31,30,31,31,30,31,30,31);

//------------------------------------------
//Номер выбраного месяца

numberMonth=0;

//------------------------------------------
//Задаём массив ссылок для каждого дня (365)

linkArray=new Array(
"/project.html",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"/link.html",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"");
link="";

//------------------------------------------
//Функция выполняется при загрузке документа. 
//Здесь мы заносим названия месяцев в options меню month
//А в options меню day заносим 31 день

function createMenus()
{
 document.myForm.month.length=12; 
 for (var i=0; i<12;i++ )
 {
 document.myForm.month.options[i].text=monthArray[i];
 }
 document.myForm.day.length=31;  
 for (var i=1; i<32; i++)
 {
  document.myForm.day.options[i-1].text=i;
 }

}

//------------------------------------------
//Функция выполняется при выборе меню month. 
//Запоминаем номер выбраного месяца, 
//длину меню day устанавливаем равной значению dayArray[numberMonth]
//и все значения option меню day приравниваем дням

function changeMenus (what)
{
 numberMonth = what.selectedIndex;
 document.myForm.day.length=dayArray[numberMonth];  
 for (var i=1; i<dayArray;[numberMonth]+1; i++)
 {
  document.myForm.day.options[i-1].text=i;
 }
}

//------------------------------------------
//Функция выполняется при выборе меню day.
//В зависимости от месяца и дня выбираем ссылку из массива linkArray

function changeMenus2 ( what )
{
 var n = what.selectedIndex;
 for (var i=0; i<numberMonth; i++)
 {
  n=n+dayArray[i]
 } 
 link=linkArray[n];
}

//------------------------------------------
//Функция выполняется при нажатии на кнопку.
//открываем новый URL

function gotoLink()
{
 document.location=link;
}
// end jscript hiding -->
</script>

</head>
<body; onLoad="createMenus()">

//------------------------------------------
//наша форма

<form; NAME="myForm">
<p;>Выберите месяц: <select; name="month" size="1" onChange="changeMenus(this)">
    <option;></option>
  </select> </p>
  <p;>Выберите день: <select; name="day" size="1" onChange="changeMenus2(this)">
    <option;> </option>
  </select> <input; type="button" value="go" onclick="gotoLink()"> </p>
</form>

</body>
</html>


Н. Смирнов
"Java 2 Enterprise. Основы практической разработки распределенных корпоративных приложений"
Подробнее>>
Заказать>>


Е. Буткевич
"Пишем программы и игры для сотовых телефонов"
Подробнее>>
Заказать>>

Узнай о чем ты на самом деле сейчас думаешь тут.


[an error occurred while processing this directive]



Apache Struts 2.0.11
Apache MyFaces Trinidad Core 1.2.3.
Sun переводит мобильные устройства с Java ME на Java SE
Хакерская атака!