How to retain the dropdown selection after a dynamic creation of a table- Jquery

Question

I have a dropdown created dynamically which is inside a function.

 function userlist() {
 $('#user-list').append('<select id="users-type-customers">'+
                        '<option value="some">Some Users</option>'+
                        '<option value="AllCustomer">All Users</option>></select>');
 }

and i have a function to handle the drop down on change event:

&('#users-type-customers').on("change", function(){
   dropdownSelect = $('#users-type-customers :selected').val();
    switch (dropdownSelect) {
            case "AllCustomer": {
                typeVal = "all";
                break;
            }
            case "some": {
                typeVal = "some";
                break;
            }
        }
   $.ajax({
         type: 'GET',
         data: {"item": typeVal},
         success: function (model) {
            this.userlist() //calling userlist function 
         }

   });
})

so now what happens is when i select All Users option, it gives me teh necessary data on success, but now when i call the userlist() , it appends the dropdown to the table and displays the default value ( being 'Some Users' in this case), which seems obvious. Im not sure how to call function while taking care to keep the selection intact and not restore to the default value. Any ideas?? Thanks!

Answer 1

Use:

function userlist(typeVal) {
$('#user-list').append('<select id="users-type-customers">'+
                    '<option value="some">Some Users</option>'+
                    '<option value="AllCustomer">All Users</option>></select>');
$('#users-type-customers').val(typeVal);
}