Home > DeveloperSection > Forums > How to Refresh dropdownlist but keep old selected value JSON
ben reitman
ben reitman

Total Post:96

Points:676
Posted on    January-16-2015 10:25 PM

 ASP.Net C#  JQuery  JavaScript  JSON 
Ratings:


 1 Reply(s)
 528  View(s)
Rate this:

I have some javascript code in one of my CSHTML files

$.getJSON("@Url.Action("GetLanguages")", function (data) {

        debugger;

        var $languages = $('.supplier-languages select');

        $languages.children().filter(function () {

            return $(this).attr('value');

        }).remove();

        $.each(data, function () {

            debugger;

            var option = $('<option />', {

                text: this.Text,

                value: this.Value

            });

 

            $languages.append(option.clone());

        });

    });

    jSnap.modals.removeModal();

basically the data is a list of selectlistitems, the first part looks for all of the supplier-languages div and selects the select, we then remove all of the listitems inside of the dropdownlist which has a value (so the "Please select..." default listitem I have, will not be removed as it has no value assigned), once all the populated items have been removed, I then iterate over my data variable and populate all of my dropdownlists again.

This code works fine, but the problem I am having is, the user goes to the page and selects some options, the user then adds a new option to the dropdownlist via a new opened jquery modal, when the modal is closed the code above is than ran, but not the options they had selected are now set back to please selecte. How can I keep the old values selected and place them back into my dropdownlist options?



Alex Leblois
Alex Leblois

Total Post:67

Points:471
Posted on    January-16-2015 10:56 PM

Here is the working code

<script>

    $.getJSON("@Url.Action("GetLanguages")", function (data) {

 

        var $languages = $('.supplier-languages select');

 

        $languages.each(function () {

            var $language = $(this);

            var selectedValue = $language.val();

 

            $language.children().filter(function () {

                return $(this).attr('value');

            }).remove();

 

 

            $.each(data, function () {

                debugger;

                var option = $('<option />', {

                    text: this.Text,

                    value: this.Value,

                });

 

                if (this.Value == selectedValue) option.attr('selected', 'selected');

 

                $language.append(option.clone());

            });

        });

    });

    jSnap.modals.removeModal();

</script>

Basically now, it does the same as above, but it does it for each dropdownlist 1 at a time, instead of iterating over all of them, we get the selectedValue, we then remove all the children, we then populate each dropdownlist with the new options and also check to see if the saved selectedvalue is equal to any of the options we are about to populate the dropdownlist with, if this is true we then set that selected to be selected,

Hope this helps other people out. 


Don't want to miss updates? Please click the below button!

Follow MindStick