Option в javascript
Как сделать так, чтобы при выборе со списка меню например пункт "Дата создания", в самом низу отображалась дата?
Вот написал код, не знаю какое свойство использовать для этого. <!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Моя страница</title>
</head>
<body>
<style>
form {
background:#FFCC99;
width: 200px;
border: 2px solid green;
font-family:"Courier New", Courier, monospace;
}
/* убрать padding/border */
form input, form select {
font-size:16px;
font-style:italic;
padding: 0;
border: 0;
width: 100%;
}
/* внешний div даст дизайн */
form div {
margin: 5px;
padding: 5px;
border: 3px solid black;
}
</style>
<form name="santa">
<div>
<select name="santa1">
<option value="t1" selected>Компания</option>
<option value="t2">Дата создания</option>
<option value="t3">Материал</option>
<option value="t4">Оборот</option>
</select>
</div>
<div>
<select name="santa2">
<option value="t01" selected>Модель</option>
<option value="t02">Цена</option>
<option value="t03">Производство</option>
<option value="t04">Цвет</option>
</select>
</div>
</form>
<script>
var form = document.body.children[0];
var select = form.elements.santa1;
//if() document.write();
</script>
</body>
</html>
|
<form name="santa">
<div>
<select name="santa1">
<option value="t1" selected>Компания</option>
<option value="t2">Дата создания</option>
<option value="t3">Материал</option>
<option value="t4">Оборот</option>
</select>
</div>
<div>
<select name="santa2">
<option value="t01" selected>Модель</option>
<option value="t02">Цена</option>
<option value="t03">Производство</option>
<option value="t04">Цвет</option>
</select>
</div>
</form>
<!-- ниже элемент, в который выводится дата -->
<div id="date"></div>
<script>
var Santa1 = document.querySelector('[name=santa1]');
Santa1.addEventListener('change', function(e) {
var index = Santa1.options.selectedIndex;
if (index === 1) {
document.querySelector('#date').innerHTML = new Date();
}
}, false);
</script>
|
Спасибо. Какие еще могу быть варианты? #date - это ссылка на какой идентификатор? Просто в коде его не вижу с id. querySelector - это новое свойство метода document? Какие по старинки варианты методов использовали для реализации такого выше? Если можно, код именно <script>.....</script> addEventListener не поддерживает ИЕ? Как избежать?
|
Цитата:
Цитата:
Если для тебя методы, поддерживаемые в IE8 и Firefox 3.5 кажутся новыми, то жизнь прошла мимо) |
Цитата:
<form name="santa">
<div>
<select name="santa1">
<option value="t1" selected>Компания</option>
<option value="t2">Дата создания</option>
<option value="t3">Материал</option>
<option value="t4">Оборот</option>
</select>
</div>
<div>
<select name="santa2">
<option value="t01" selected>Модель</option>
<option value="t02">Цена</option>
<option value="t03">Производство</option>
<option value="t04">Цвет</option>
</select>
</div>
</form>
<!-- ниже элемент, в который выводится дата -->
<div id="date"></div>
<script>
(function(){
var santa = document.forms.santa;
santa.santa1.onchange = function(e) {
if (this.value == 't2') {
document.getElementById('date').innerHTML = new Date();
}
};
})();
</script>
В принципе, из предосудительного тут только onchange, и может быть, innerHTML. Вместо непонятного t2 лучше что-то более осмысленное написать. |
| Часовой пояс GMT +3, время: 12:20. |