i have a jquery function that retrieves data from a php file and puts all that into a select list, which works just fine, the problem is that it takes some time to load and i wanted to show a loading text in the select while its loading, however it doesn't seem to work, here's what i've tried:

var modelSelect = $('[name="model"]'); // this is the select <select> list 

$('[name="make"]').on('change', function(){ // another <select> that fires up the ajax 
var chosen = $(this).val();

    $.ajax({

        type: "POST",
        url: "process.php",
        data: {'send': chosen},
        beforeSend: function(){
            modelSelect.html("loading"); //doesn't work
                },
        success: function(data){
            modelSelect.html(data);


        }

    });

});

any ideas how i can make it say loading there?

i have a jquery function that retrieves data from a php file and puts all that into a select list, which works just fine, the problem is that it takes some time to load and i wanted to show a loading text in the select while its loading, however it doesn't seem to work, here's what i've tried:

var modelSelect = $('[name="model"]'); // this is the select <select> list 

$('[name="make"]').on('change', function(){ // another <select> that fires up the ajax 
var chosen = $(this).val();

    $.ajax({

        type: "POST",
        url: "process.php",
        data: {'send': chosen},
        beforeSend: function(){
            modelSelect.html("loading"); //doesn't work
                },
        success: function(data){
            modelSelect.html(data);


        }

    });

});

any ideas how i can make it say loading there?

• javascript
• jquery
• html

1 Answer 1

Use this code instead

modelSelect.html("<option> loading ... </option>");

Hope it helps.