在ajax中传递选择值

Question

I'm trying to pass a select value in my ajax function.

my html code:

    <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>

and my JS code:

   $('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) ;
            },

        });

    });

but the first alert('Select field value has changed to' + $('select.selectUser').val()); is not generating any alert and I'm not getting any error in my console.

Can you tell me what's wrong?

Answer 1

Let's try with $('#exampleFormControlSelect1').on('change', function(){