Передайте выбранное значение в ajax

Question

Я пытаюсь передать значение выбора в моей функции ajax.

мой HTML-код:

    <select class="form-control" id="exampleFormControlSelect1" class="selectUser">
                    <?php foreach($logs as $key => $value){ ?>
                        <option value="<?php echo $value['username'];?>"><?php echo $value['username'];     ?></option>
                    <?php } ?>
                </select>

и мой JS-код:

   $('select.selectUser').change(function(){
        alert('Select field value has changed to' + $('select.selectUser').val());

        $.ajax({
            type: 'GET',
            url: "Panier/loadPanier",
            data: {username: $('select.selectUser').val()},
            success: function(result){
                var data1 = JSON.parse(result);
                alert(data1.username) ;
            },

        });

    });

но первый alert('Select field value has changed to' + $('select.selectUser').val()); не генерирует никаких предупреждений, и я не получаю никаких ошибок в своей консоли.

Можете ли вы сказать мне, что не так?

Answer 1

Вы добавили two class атрибуты к элементу select - class="form-control" и class="selectUser".

<select class="form-control" id="exampleFormControlSelect1" class="selectUser">

Поэтому он игнорирует ваш второй класс - class="selectUser".

$('select.selectUser').on('change', function() {
    console.log($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control selectUser" id="exampleFormControlSelect1">
  <option value="1" selected="selected">One</option>
  <option value="2">Two</option>
</select>

Answer 2

Давайте попробуем с $('#exampleFormControlSelect1').on('change', function(){