Как получить из тега option его содержимое

175

03 ноября 2018, 21:50

Столкнулся с такой проблемой: У меня есть форма бронирования отелей, в ней есть селект с номерами (стандартный, люкс и т.д). Выглядит это следующим образом:

<form action="обработчик" method="post">
<select id="room" name="room" value="">
<option value="0">Выбрать</option>
        <option value="2300">Стандарт</option>
        <option value="2700">Стандарт (Улучшенный)</option>
        <option value="5000">Люкс (с подиумом)</option>
</select>
/// submit
</form>

На этой же странице с формой у меня происходить подсчет цены, именно поэтому у тега option стоят такие значения value. После нажатия на кнопку бронировать, данные поступают в обработчик. Никак не могу вывести в обработчике названия номера. Мне приходят значения value. Как получить значение содержимого выбранного option. Думаю, что в таком случае нужно вытаскивать сначала javascript'ом и каким-то образом отправлять в обработчик, но не выходит. Мучаюсь с этим уже дня 3)

Answer 1

Как вариант для расчёта стоимости используйте атрибут data-cost.

<form action="обработчик" method="post">
   <select id="room" name="room" value="">
      <option value="0" data-cost="0">Выбрать</option>
      <option value="Стандарт" data-cost="2300">Стандарт</option>
      <option value="Стандарт (Улучшенный)" data-cost="2700">Стандарт (Улучшенный)</option>
      <option value="Люкс (с подиумом)" data-cost="5000">Люкс (с подиумом)</option>
   </select>
/// submit
</form>

Получить стоимость:

var select = document.getElementById("room");
var value = select.options[select.selectedIndex].getAttribute('data-cost');

Answer 2

$(document).ready(function () {
$('#room').change(function(event) {
    //Получаем данные Data-cost
    var cost = $("option[value="+$(this).val()+"]", this).data('cost');
    //Получаем значение value
    var value = $(this).val();
    //Получаем текст межу <option>Текст</option>
    var text = $("option[value="+$(this).val()+"]", this).html();
  });
});