在使用Ajax和PHP更改多个select jQuery时

Question

I have a multiple selection in my HTML page which is generated in an AJAX response: the format is like this:

<div>
    <select class='myselect' idselect=1>
        <option value='private'>Private</option>
        <option value='public'>Public</option>
    </select><button idfeed=1 class='change'>Change status</button></div> 
<div>
    <select class='myselect' idselect=2>
        <option value='private'>Private</option>
        <option value='public'>Public</option>
    </select><button idfeed=2 class='change'>Change status</button>
</div>......

In my jquery/Ajax I have something like that (the code which generating the HTML above):

<script>
$( document ).ready(function() {
    var id= $('#idUser').val(); 
    //console.log('findAll');
    $.ajax({
        type: 'GET',
        url: 'http://localhost/ws/api/getUserFeeds/'+id,
        dataType: "json", // data type of response
        success:function(data){ 
        //alert(data[0].URL);

            $.each(data, function (i) { 
                var toappend="<div><select class='myselect' idselect="+data[i].id+"><option value='private'>Private</option><option value='public'>Public</option></select><button idfeed="+data[i].id+" class='change'>Change status</button></div>";
                console.log(toappend);

                $("#foo").append(toappend+"<div id=rss"+i+ ">"+i+"</div>");
                $('#rss'+i).FeedEk({
                    FeedUrl: data[i].URL,
                    MaxCount: 1,
                    DateFormat: 'MM/DD/YYYY HH:mm'
                });

            });     
       }
    });

});
</script>

And when I want to retrive the value of selected by user which must either private or public I use this jquery code to select,but the problem is that it select only private all time.

<script type="text/javascript">
  $(document).on('change','.myselect',function(){
    var selectvar = $('.myselect').val();
    console.log(selectvar);
  });

</script>

As you can see I display in my console the value of the selected one,and using the JQuery change event. I try by many ways to try to make it work but it always return private(My select is composed of two choice:private and public)

Thanks for your help!!!

Answer 1

You made a small mistake at the end. You should retrieve your select input with $(this) , not $('.myselect') :

$(document).on('change','.myselect',function(){
    var selectvar = $(this).val();
    console.log(selectvar);
});

Answer 2

Try this

DEMO

$(document).on('change','.myselect',function(){
    var selectvar = $(this).val();
    console.log(selectvar);
});

$(this) = > the element changed

$(".myselect") => it can be any of the two select elements in your given html