Question

I’m using jQuery to re-populate a DropDownListFor using the following code:

$('#Teste).change(function () {
            $.ajax({
                type: 'GET',
                url: '/Teste/Teste/Teste/' + $(this).val(),
                dataType: 'json',
                success: function (data) {
                    var ddl = $('#TesteTw);
                    ddl.empty();
                    $(data).each(function () {
                        ddl.append($('<option/>', {
                            value: this.Value
                        }).html(this.Text));
                    });
                }
            });        
});

But the HTML doesn’t refresh, I still got the same items on the DropDownList.

Although if I get the DropDownList values with jQuery I get the updated values.

Any ideas?

Answer 1

You’re missing a closing quote on the following lines:

$('#Teste).change(function () { // should be $('#Teste').change(function () {
var ddl = $('#TesteTw);         // should be var ddl = $('#TesteTw');

Also, the way you’re iterating over the returned data, which I’m assuming is an array is not idea. Consider doing the following:

for (var i = 0; i < data.length; i++) {
    ddl.append(
        $('<option/>')
            .val(data[i])
            .html(data[i].Text)
    );
}