Question

I have a textbox and a DropDownList. The DropDownList is populated based on the input in the textbox. There are a few problems I’m having where the DropDownList isn’t being populated correctly.

One is when I type something into the textbox I can tab to the DropDownList and have it filled correctly. But if I decide I want to change what is in the textbox and type something else into it and then try to tab to the DropDownList again it doesn’t update.

Another problem is when I start typing into the textbox I have an autocomplete list that pops up and I can click an option to have it fill the textbox in for me, but when I do this the DropDownList is not being populated.

This is the javascript I have to get the DropDownList filled.

$('#textFrame').live('change', function (event) {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetDirectors", "HostScan")',
        data: { frame: $(this).val() },
        success: function (data) {
            var markup = '';
            for (var x = 0; x < data.length; x++) {
                markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
            }
            $('#DirectorList').html(markup).show();
        }
    });

});

What should I change to make this work?

Thanks in advance for your help!

Answer 1

First thing is that .live is deprecated as of jQuery 1.7.0. Try using .on instead.

Secondly use the jQuery file hosted by google cdn.. It will help reduce your site’s bandwidth.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

As for the code try clearing up the options before you append new values. This makes sure you are not adding new options to the previous options.

$(function(){

    $('#textFrame').on('change', function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetDirectors", "HostScan")',
            data: { frame: $(this).val() },
            success: function (data) {
                if(data != null){
                var markup = '';
                $('#DirectorList').find('option').remove();
                    for (var x = 0; x < data.length; x++) {
                        markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
                    }
                $('#DirectorList').append(markup).show();
                }
            }
        });
    });
});