Запоминание значений выпадающих списков Combo Select

Question

У меня есть два выпадающих списка, второй список зависит от первого.Опции элемента select генерируются с помощью java-скрипта, в котором многомерные массивы хранят значения.

Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке страницы учетной записи пользователя в раскрывающихся опциях будет отображаться первый наборзначений из массивов, а не значение, которое было сохранено пользователем.Это вводит в заблуждение, потому что, хотя правильное значение сохраняется в учетной записи пользователя, оно показывает информацию по умолчанию.

У кого-нибудь есть решение для этого?

Это образец формы:

<form> 
<select type="text" name="option1" id="first" value=""><option value=""></option></select>
<select type="text" name="option2" id="second" value=""><option value=""></option></select>
</form>

Я использую скрипт jquery, который идентифицирует id (#) элемента select и загружает соответствующее значение для каждой опции select.Это код:

(function($) {
    $.fn.doubleSelect = function(doubleid, values, options) {

        options = $.extend({
            preselectFirst: null,
            preselectSecond: null,
            emptyOption: false,
            emptyKey: -1,
            emptyValue: 'Choose...'
        },
        options || {});

        var $first = this;
        var $secondid = "#" + doubleid;
        var $second = $($secondid);

        var setValue = function(value) {
            $second.val(value).change();
        };

        /** Helper Function to remove childs from second */
        var removeValues = function() {
            $($secondid + " option").remove();
        };

        /** OnChange Handler */
        $(this).change(function() {
            removeValues();
            var $current = this.options[this.selectedIndex].value;
            if ($current !== '') {
                $.each(values,
                function(k, v) {
                    var bestk;
                    if ($current == v.key) {
                        $.each(v.values,
                        function(k, v2) {
                            if (!bestk && (v.defaultvalue !== null && v2 == v.defaultvalue)) {
                                bestk = k;
                            }
                            if (options.preselectSecond !== null && v2 == options.preselectSecond) {
                                bestk = k;
                            }
                        });
                        $.each(v.values,
                        function(k, v2) {
                          var o = $("<option>").html(k).attr('value', v2);
                          if (options.preselectSecond) {
                            $.each(options.preselectSecond,
                              function(index, selected) {
                                if (v2 == selected) {
                                    o.html(k).attr("selected", "selected");
                                }
                              }
                            );
                          }
                          if (k === bestk) { o.html(k).attr("selected", "selected"); }
                          o.appendTo($second);
                        });
                    }
                });

            } else {
                setValue(options.emptyValue);
            }
        });

        return this.each(function() {

            //remove all current items in select boxes
            $first.children().remove();
            $second.children().remove();

            // Handle the empty option param
            if (options.emptyOption) {
                var oe = $("<option>").html(options.emptyValue).attr('value', options.emptyKey);
                oe.appendTo($first);
            }

            // add all options to first select box
            $.each(values,
            function(k, v) {
                var of = $("<option>").html(k).attr('value', v.key);
                if (options.preselectFirst !== null && v.key == options.preselectFirst) {
                    of.html(k).attr("selected", "selected");
                }
                of.appendTo($first);

            });

            if (options.preselectFirst === null) {
                var $current = this.options[this.selectedIndex].value;
                if ($current !== '') {
                    $.each(values,
                    function(k, v) {
                        var bestk;
                        if ($current == v.key) {
                            $.each(v.values,
                            function(k, v2) {
                                if (!bestk && (v.defaultvalue !== null && v2 == v.defaultvalue)) {
                                    bestk = k;
                                }
                                if (options.preselectSecond !== null && v2 == options.preselectSecond) {
                                    bestk = k;
                                }
                            });
                            $.each(v.values,
                            function(k, v2) {
                                var o = $("<option>").html(k).attr('value', v2);
                                if (k === bestk) { o.html(k).attr("selected", "selected"); }
                                o.appendTo($second);
                            });

                        }

                    });

                } else {
                    setValue(options.emptyValue);
                }
            } else {
                $first.change();
            }

        });

    };
})(jQuery);

Это пример массивов:

$(document).ready(function()
 {

    var selectoptions = {
            "Option Value 1": {
                    "key" : " Option Value 1",
                        "defaultvalue" : 1,
                    "values" : {
                    "Option 1": "Option 1",
                    "Option 2": "Option 2",
                    "Option 3": "Option 3",
                    "Option 4": "Option 4"
                     }
              },
                 " Option Value 2": {
                 "key" : " Option Value 2",
                 "defaultvalue" : 2,
                 "values" : {
                    "Option 1": "Option 1",
                    "Option 2": "Option 2",
                    "Option 3": "Option 3"

                     }
              },
     " Option Value 3": {
                 "key" : " Option Value 3",
                 "defaultvalue" : 3,
                 "values" : {
                    "Option 1": "Option 1",
                    "Option 2": "Option 2",
                    "Option 3": "Option 3",
                    "Option 4": "Option 4",
                    "Option 5": "Option 5"
                     }
    },
  };

        $('#first').doubleSelect('second', selectoptions);

 });