Выпадающий список лет php/js

"выпадающий список лет" Выпадающий список лет по умолчанию. С помощью php. Выпадающий список лет javascript.

И на закуску функция с выпадающим списком лет!

Подробно о выпадающем списке лет

1. Как сделать выпадающий список лет html?
2. Как сделать выпадающий список лет php?
3. Как сделать выпадающий список лет php в обратную сторону
4. Как получить значение выпадающего списка лет в php&
5. Выпадающий список лет javascript
6. Как стилизовать выпадающий список лет?
7. Функция php для создания выпадающего списка лет.
   
   1. dwYear - автоматически создаваемый выпадающий список лет
   2. Функция dwYear - список лет от меньшего к большему
   3. dwYear - список лет от текущего года к меньшему/большему
8. Скачать

Как сделать выпадающий список лет?

Вообще... это интересно... в html существует тип "month", а вот type="year" - не существует

<input type="month">

Результат:

Как вы понимаете... это не совсем то, чтобы хотелось иметь в выпадающем списке лет.

Делаем выпадающий список лет!

Для того, чтобы сделать выпадающий список лет нам понадобится:

Тег select

Тег option

Создать количество строк option с перечнем лет и готово:

Код самого простого выпадающего списка лет:

<select>

 <option>выбрать год</option>

 <option>2020</option>

 <option>2019</option>

 <option>2018</option>

 <option>2017</option>

 <option>2016</option>

</select>

Выведем на экран выпадающий список лет html:

выбрать год 2020 2019 2018 2017 2016



Как сделать выпадающий список лет php?

Для того, чтобы построить выпадающий список в php нам также понадобится ранее приведенные теги:

Тег select

Тег option

Далее нам понадобится php :

Используем "echo" для вывода информации на эран.

Нам потребуется цикл - {for}

Соберем весь код выпадающего списка в php:

<?
echo '<select>
 <option>выбрать год</option>';
 for ($i=2016; $i < 2021; $i++) {
  echo '<option>'.$i.'</option>';
 }
echo '</select>';
?>

Разместим приведенный код выпадающего списка лет на php:

Выпадающий список лет аналогичный, что "html", что "html + php" - но php - как вы наверное поняли имеет явное преимущество... вы можете написать какое...

выбрать год20192020202120222023



Как сделать выпадающий список лет php в обратную сторону

Как и в предыдущем пункте создания выпадающего списке лет в php? нам потребуется:

Тег select

Тег option

Далее нам понадобится php :

Используем "echo" для вывода информации на эран.

Нам потребуется цикл - {for}

Цикл немного переделаем, чтобы список щел в обратную сторону - от большего к меньшему!

Для этого нам потребуется изменить первую строку цикла:

for ($i=2020; $i > 2015; $i--)

Соберем весь код выпадающего списка в php от большего к меньшему:

<?
echo '<select>
 <option>выбрать год</option>';
 for ($i=2020; $i > 2015; $i--) {
  echo '<option>'.$i.'</option>';
 }
echo '</select>';
?>

Разместим приведенный код выпадающего списка лет от большего к меньшему:

выбрать год20242023202220212020



Как получить значение выпадающего списка лет в php

Для того, чтобы получить год из выпадающего списка лет в php нам потребуется:

Тег form.

Метод post

Внутрь помещаем наш выпадающий список.

+ добавляем в "select" атрибут name

name="example"

В первый option добавляем пустой value

+ style="display:none" - чтобы нельзя было вернуться к первому нулевому пункту...

Далее нам потребуется php:

<?
if($_POST['example'])
{
  echo $_POST['example'] ;
}
else
{
  echo 'Для того, чтобы получить данные из выпадающего списка лет - нужно нажать кнопку "Получить год из выпадающего списка лет".';
}
?>


Код получения данных из выпадающего списка лет

<?

if($_POST['example'])

{

echo $_POST['example'] ;

}

else

{

echo 'Для того, чтобы получить данные из выпадающего списка лет - нужно нажать кнопку "Получить год из выпадающего списка лет".';

}

?>

<form method="post">

<?

echo'<select required name="example">

<option value style="display:none">выбрать год</option>';

for ($i=2020; $i > 2015; $i--) {

echo '<option value='.$i.'>'.$i.'</option>';

}

echo '</select>';

?>

<input name="submit" type="submit" value="Отправить">

</form>

выбрать год20242023202220212020
Результат:

Для того, чтобы получить данные из выпадающего списка лет - нужно нажать кнопку "Получить год из выпадающего списка лет."




Выпадающий список лет javascript

Аналогичный способ создания выпадающего списка лет в javascript.

Поскольку логика абсолютно аналогична, только используем другой язык программирования, то сильно на этом способе создание выпадающего списка лет в javascript

Начальный тег будет состоять как и раньше из двух

Тег select

Тег option

<select id="year"><option value style="display:none">Выбрать год</option></select>

В цикле создадим нужное количество options и + добавим value

<script>
for (let year = 2000; year <= 2020; year++) {
let options = document.createElement("OPTION");
document.getElementById("year").appendChild(options).innerHTML = year;
document.getElementById("year").appendChild(options).value = year;
}
</script>

Нам осталось вывести приведенный код выпадающего спика лет в javascript

Пример выпадающего списка лет в javascript

Выбрать год



Как стилизовать выпадающий список лет?

Для того, чтобы стилизовать выпадающий список лет ... нам понадобится подопытный "select"

<select class="example">
  <option value style="display:none">Выбрать год</option>
  <option>1</option>
  <option>2</option>
</select>

Применим к данному классу немного стилей:

<style>
select.example {
  cursor: pointer;
  display: block;
  width: 300px;
  padding: 10px;
  text-indent: 17px;
  background: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: system-ui;
  font-size: 1rem;
  color: #444;
  margin: auto;
}
</style>

Выведем стилизованный список лет:

Выбрать год 1 2

7. Функция php для создания выпадающего списка лет.

   Продолжаю тему автоматически создаваемых форм.

   Повторю пару слов - Зачем?

   Когда у вас, как у меня возникает необходимость раз за разом, повторять одно и тоже множество раз, то вы волей-неволей начнете задумываться - что надо с этой херней что-то делать!

   Впервые я задумался над этим уже так давно, что и не помню, но реализовал впервые в теме
   Поэтому...

   С выпадающим списком лет поступлю аналогично!

   Функция dwYear - автоматически создаваемый выпадающий список лет.

   Функцию размещаем(естественно) выше её вызова.

   <?
   function dwYear($b,$e,$n,$w){
   if($b=='now'){$b=date('Y');}if($e=='now'){$e=date('Y');}
   $ec.='<style>select.dw_'.$n.' {cursor: pointer;display:block;width:'.$w.'px;padding: 10px;text-indent: 17px;background:none;border:1px solid #ccc;border-radius:3px;font-family:system-ui;font-size:1rem;color:#444;margin:auto;}</style><select id="id_'.$n.'" class="dw_'.$n.'" name="dw_'.$n.'" required><option style="display:none;" value="">Выбрать год</option>';
   if($b>$e){for($i=$b;$i>=$e;$i--){$ec.='<option value='.$i.'>'.$i.'</option>';}}
   if($b<$e){for($i=$b;$i<=$e;$i++){$ec.='<option value='.$i.'>'.$i.'</option>';}}
   $ec.='</select>'; return $ec;}
   ?>

   Вызов функции dwYear

   <?
   echo dwYear(2000,1980,example,300);
   ?>

   Значение аргументов в функции автоматически создаваемый выпадающий список лет.

   Разберем значение аргументов выпадающего списка лет на выше приведенном примере вызова функции dwYear:

   2000 - число максимального года.

   1980 - число минимального года.

   "example" - уникальный префикс -необходим для создания уникального списка лет, если неа странице требуется вызвать более 1 раза функцию dwYear.

   300 - ширина поля выпадающего списка лет

   Где еще участвует префикс?...

   Рассмотрим в качестве примера тег select ... где вы видите наш пример префикса "example" - он здесь установился автоматически...

   <select id="id_example" class="dw_example" name="dw_example">

   Вызовем функцию dwYear

   Как было показано выше - вызовем функцию прямо здесь:

   Выбрать год200019991998199719961995199419931992199119901989198819871986198519841983198219811980

   Функция dwYear - список лет от меньшего к большему

   В выше приведенном примере вызова функции dwYear - список лет выпадал и первое число было первым числом в функции.

   А как сделать, чтобы меньшее число года стояло в начале?

   Легко!

   Если вы хотите, чтобы меньшее число года стояло первым в выпадающем списке лет, то просто в первом аргументе ставим меньшее число:

   echo dwYear(1980,2000,example1,300);

   Пример выпадающего списка лет от меньшего к большему:

   Выбрать год198019811982198319841985198619871988198919901991199219931994199519961997199819992000

   Если вы нажмете по строке "Выбрать год", то увидите, что меньшее число года, которое мы расположили на месте первого аргумента - стоит в выпавшем списке первым:

   

   Функция dwYear - список лет от текущего года к меньшему/большему

   Для того, чтобы функция начинала выпадающий список лет от текущего года к меньшему:

   На месте первого аргумента ставим слово "now" - сейчас

   echo dwYear(now,2000,example3,300);

   Пример отсчета выпадающего списка лет с текущего года:

   Выбрать год2024202320222021202020192018201720162015201420132012201120102009200820072006200520042003200220012000 Наоборот

   Если требуется вывести выпадающий список лет от меньшего к текущему году, то на место второго аргумента ставим слово now

   echo dwYear(2000,now,example2,300);

   Пример отсчета выпадающего списка лет от меньшего года к текущему:

   Выбрать год2000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024