Форум

usa-1500 · #1 (**permalink**) 11.10.2014, 22:53

Как сделать так, чтобы при выборе со списка меню например пункт "Дата создания", в самом низу отображалась дата?

Вот написал код, не знаю какое свойство использовать для этого.

<!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>

Safort · #2 (**permalink**) 12.10.2014, 00:26

<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>

usa-1500 · #3 (**permalink**) 12.10.2014, 00:45

Спасибо. Какие еще могу быть варианты? #date - это ссылка на какой идентификатор? Просто в коде его не вижу с id. querySelector - это новое свойство метода document? Какие по старинки варианты методов использовали для реализации такого выше? Если можно, код именно <script>.....</script> addEventListener не поддерживает ИЕ? Как избежать?

danik.js · #4 (**permalink**) 12.10.2014, 09:44

Сообщение от usa-1500

Просто в коде его не вижу с id.

Шары протри ))

Сообщение от usa-1500

querySelector - это новое свойство метода document

https://developer.mozilla.org/en-US/..._compatibility
Если для тебя методы, поддерживаемые в IE8 и Firefox 3.5 кажутся новыми, то жизнь прошла мимо)

danik.js · #5 (**permalink**) 12.10.2014, 09:50

Сообщение от usa-1500

Какие по старинки варианты методов использовали для реализации такого выше?

Старинная реализация:

<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 лучше что-то более осмысленное написать.

Форум

Справочник

Discord чат

Курсы javascript