Как отобразить значение выбранного тега опции при нажатии AJAX

Question

Я хочу отобразить значение параметра внутри тега select, как только он будет нажат / выбран с помощью ajax. Я попробовал этот код (ниже), но он не работает.

    <div class="form-group row">
        <select name="count_pax" id="count_paxx" class="form-control col-md-9"/>
            <option value="">Select how many people</option>
            <option value="1">1 pax</option>
            <option value="2">2 pax</option>
            <option value="3">3 pax</option>
            <option value="4">4 pax</option>
            <option value="5">5 pax</option>
            <option value="6">6 pax</option>
            <option value="7">7 pax</option>
            <option value="8">8 pax</option>
            <option value="9">9 pax</option>
            <option value="10">10 pax</option>
            <option value="11">11 pax</option>
            <option value="12">12 pax</option>
        </select>
    </div>
    <div class="form-group row" id="demo_paxx">
    </div>

Это мой код Ajax

    $(document).ready(function() {
        $("#count_paxx").change(function(){
            document.getElementById('$demo_paxx').innerHTML = $('#count_paxx option:selected').val();
        })
    });

Answer 1

Идентификатор $demo_paxx не существует (этого не должно быть $).

Поскольку вы используете jQuery, вы можете:

• выберите его с помощью ID Selector , с $('#demo_paxx'),
• получить выбранное значение, используя .val() на элементе select,
• использовать .text() для изменения его содержимого.

Демо-версия:

$(function() {
  $('#count_paxx').on('change', function() {
    $('#demo_paxx').text($(this).val());
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <select name="count_pax" id="count_paxx" class="form-control col-md-9" />
  <option value="">Select how many people</option>
  <option value="1">1 pax</option>
  <option value="2">2 pax</option>
  <option value="3">3 pax</option>
  <option value="4">4 pax</option>
  <option value="5">5 pax</option>
  <option value="6">6 pax</option>
  <option value="7">7 pax</option>
  <option value="8">8 pax</option>
  <option value="9">9 pax</option>
  <option value="10">10 pax</option>
  <option value="11">11 pax</option>
  <option value="12">12 pax</option>
  </select>
</div>
<div class="form-group row" id="demo_paxx">
</div>

Answer 2

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

const selectElem = document.querySelector('#count_paxx');
const outputElem = document.querySelector('#demo_paxx');

selectElem.addEventListener('change', () => {
    outputElem.innerText = selectElem.querySelector(`option[value='${selectElem.value}']`).innerText
});

JSFIDDLE