Выпадающий список
- Автор темы Михаил
- Дата начала
- Статус
vla
Well-Known Member
- Регистрация
- 16.09.2011
- Сообщения
- 230
Посмотри тему на сайте tigra60.kiev.ua: Оригинальный выпадающий список
Еще взгляни на тему на этом форуме: Javascript меню. Это тоже может пригодится...
Если не получится или не подходит пиши здесь - постораюсь помочь!
Вот еще нашел (там вообще сделано без JS): Выпадающее меню
Еще взгляни на тему на этом форуме: Javascript меню. Это тоже может пригодится...
Если не получится или не подходит пиши здесь - постораюсь помочь!
Вот еще нашел (там вообще сделано без JS): Выпадающее меню
Спасибо за совет ,но это не совсем то, что мне нужно. Надо чтобы при выборе элемента изображение и текст появлялись не в списке, а отдельно от него и оставались там пока не будет выбран др. элемент.
vla
Well-Known Member
- Регистрация
- 16.09.2011
- Сообщения
- 230
[member=Михаил], щас до меня дошло, что вы имеете ввиду )))
Я сделал небольшой примерчик, стилями не раскрашивал и вообще выглядит это ужасно но суть ясна:
Смысл таков: С помощью списка(выпалающего или обычного) я передаю блоку (например DIV'у) HTML-код, который он будет содержать - там может быть все что угодно(текст, картинка, таблица, другой список итд)
не пугайся, что картинка не откроется, но она будет (я не указал адрес!)
не вникай в названия элементов списка (я просто свой скопировал из катькулятора)
Не буду обяснять все подробно, но чтобы понять вам необходимо посмотреть про:
событие onChange
оператор выбора switch [sup](можно использовать другой понравившийся...)[/sup]
обрашение к элементу документа через его ID document.getElementById("id").innerHTML
Кстати можете посмотреть как я использовал выпадающий список в своем калькуляторе, правда немного для других целей... Там список передаёt значение для пересчета пикселей, а внешне ничего не меняется
Калькулятор Сантиметны и Пиксели.
Обсуждал я эту тему Здесь
_____________________________________
И ЕЩЕ!
Сам хочу уточнить у спецов такой вопрос:
Вставляю часть HTML-кода с помощь document.getElementById("id").innerHTML = "<img src='картинка.jpg'>"
Если JS вызовет картинку после полной загрузки страницы, обозреватель ее подгрузит?
Подгружает Opera 11, Chrome[sup]один из последних[/sup], IE9. Как старые браузеры? Это валидно?
Предлагаю свой вариант на JS
Я сделал небольшой примерчик, стилями не раскрашивал и вообще выглядит это ужасно но суть ясна:
Смысл таков: С помощью списка(выпалающего или обычного) я передаю блоку (например DIV'у) HTML-код, который он будет содержать - там может быть все что угодно(текст, картинка, таблица, другой список итд)
HTML
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выпадающий список управляет элементом, напр. DIV'ом</title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<select onChange="f_onchange();" name="dpi" id="dpi">
<option value="150">150 DPI (Плохое качество)</option>
<option value="300">300 DPI (Хорошее качество)</option>
<option value="450" selected>450 DPI (Отличное качество)</option>
<option value="600">600 DPI (Максимальное для печати)</option>
</select><br><br>
<div id="mark">Ты нажал DPI = 450, также это значение по умолчанию<br></div>
</body>
</html>JavaScript
Код:
// JavaScript Document
function f_onchange(){
var iii = document.getElementById("dpi").value;
switch (iii){
case "150":
iii="Ты выбрал плохое качество";
break;
case "300":
iii="Ты нажал DPI = 300";
break;
case "450":
iii="Ты нажал DPI = 450, также это значение по умолчанию";
break;
case "600":
iii="Ты нажал DPI = 600, картинка спереди. Да еще фон раскрасил!!! <img style='float:left' width='100' height='200' src='' alt='другая не найдена' title='не найдена'>";
document.getElementById("mark").style.backgroundColor = "#ff0"
break;
}
document.getElementById("mark").innerHTML = iii
}не вникай в названия элементов списка (я просто свой скопировал из катькулятора)
Не буду обяснять все подробно, но чтобы понять вам необходимо посмотреть про:
событие onChange
оператор выбора switch [sup](можно использовать другой понравившийся...)[/sup]
обрашение к элементу документа через его ID document.getElementById("id").innerHTML
Кстати можете посмотреть как я использовал выпадающий список в своем калькуляторе, правда немного для других целей... Там список передаёt значение для пересчета пикселей, а внешне ничего не меняется
Калькулятор Сантиметны и Пиксели.
Обсуждал я эту тему Здесь
_____________________________________
И ЕЩЕ!
Сам хочу уточнить у спецов такой вопрос:
Вставляю часть HTML-кода с помощь document.getElementById("id").innerHTML = "<img src='картинка.jpg'>"
Если JS вызовет картинку после полной загрузки страницы, обозреватель ее подгрузит?
Подгружает Opera 11, Chrome[sup]один из последних[/sup], IE9. Как старые браузеры? Это валидно?
- Статус
