Option и data-val

Задача:

Необходимо передать в пост запросе содержимое, находящееся между тегами option в списке.

Решение

Уточним задачу. Есть список:

<select name="data" id="data" >
<option value="0">Дата отправления</option>
<option value="1">28.05.2018, Понедельник</option>
<option value="2">29.05.2018, Вторник</option>
</select>

Самое первое, что приходит на ум – это просто содержимое, находящееся между тегами (наименованиями списка) занести в атрибут value. Тогда все было бы предельно просто, в обработчике определяем переменную:

$perem = $_POST['data'];

И работаем с ней дальше. Однако, по некоторым причинам делать так нельзя. В атрибуте value должны быть ид элемента. Но что нам мешает добавить еще один атрибут? Ничего! Так и поступаем – добавляем атрибут data-val, получается так:

<select name="data" id="data">
<option value="0">Дата отправления</option>
<option value="1" data-val="28.05.2017, воскресенье">28.05.2018, Понедельник</option>
<option value="2" data-val="30.05.2017, вторник">29.05.2018, Вторник<</option>
</select>

Теперь с помощью функции jQuery data('val') мы можем в любой момент получить значение этого атрибута. Что мы и делаем в данной функции:

function dattVs() { 
var zn = $('#data option:selected').data('val'); 
}

Здесь мы выбираем текущий элемент списка и получаем data-val его. Осталось повесить обработчик события, срабатывающий при выборе пункта в списке. Итоговый результат по списку:

vselect name="data" id="data" onchange="dattVs();">
<option value="0">Дата отправления</option>
<option value="1">28.05.2018, Понедельник</option>
<option value="2">329.05.2018, Вторник</option>
</select>

Однако, метод dattVs() просто получает значение, но никуда его не заносит или не отправляет. Решим и этот вопрос. Создадим в нашей форме еще одно поле input типа hidden:

<input type="hidden" value="0" name = "datt" id="datt" />

и в него будем заносить это значение. Теперь функция выглядит так:

function dattVs() { 
var zn = $('#data option:selected').data('val'); 
$("#datt").val(zn);
}

Вот и все, теперь, чтобы работать в php со значением между тегами option, надо просто взять его из пост запроса:

$perem = $_POST['datt'];

заметки, html, javascript, jquery, php