CODEWITHSUNDEEP
c#javascriptjqueryasp.net
savantKing
savantKing

Reputation: 89

How to reload dropdownlist

I want to reload the dropdownlist.

If I now do a selection on the dropdownlist and I select other option then the previous values are also showing.

 <script type="text/javascript">
    $(document).ready(function () {
        $("#SelectedCategoriedFaqId").change(function () {
            $.ajax({
                url: "/Medicijnverstrekking/FAQ/SubCategorie/",
                type: 'POST',
                dataType: 'json',
                data: {
                    Categorieid: this.value
                },
                success: function (data) {
                    $('SelectedCategoriedFaqId').val('').trigger('liszt:updated');
                    //alert("Data retrieval successfull");
                    var items = "";

                    $.each(data, function (i, val) {
                        var opt = $("<option></option>")
                          .attr("value", val.Value)
                          .text(val.Text);
                        $('#FaqCategorie_Id').append(opt);
                    });

                },
                error: function (xhr) {
                    alert("Something seems Wrong");
                }
            });

        });  
    });      
</script>

Thank you

Upvotes: 3

Views: 177

Answers (2)

evanbb
evanbb

Reputation: 105

You should first remove all other options from the list before appending the ajax-retrieved options. Assuming the first option is

<option value=""></option>

, you could:

success: function (data) {
    var ddl = $('SelectedCategoriedFaqId');
    ddl[0].options.length = 1;
    ddl.val('').trigger('liszt:updated');
    //alert("Data retrieval successfull");
    var items = "";

    $.each(data, function (i, val) {
        var opt = $("<option></option>")
            .attr("value", val.Value)
            .text(val.Text);
        ddl.append(opt);
});

HTH

Upvotes: 0

Christos
Christos

Reputation: 53958

Before the following 

$.each(data, function (i, val) {
                    var opt = $("<option></option>")
                      .attr("value", val.Value)
                      .text(val.Text);
                    $('#FaqCategorie_Id').append(opt);
                });

just write:

$('#FaqCategorie_Id').empty();

This will remove all the items from your dropdown and then the new ones you have gottent from you ajax request will be appended to your dropdown.

Upvotes: 1

Related Questions