Jquery form select otion doesn't save after submit

Question

Im using a jquery script for combo-selected drop down options. The script works fine, beside the fact that after submitting the selected option isn't save as the selection it defaults back to the first values of each drop down list.

I need some help with this. Is there a solution that I can add to one of my existing posts or another alternative.

Im using two scripts, one to dynacially select dual drops (one drop is dependent on the other) and the other script list all the options and their sub-options.

Here is the code for the first script:

(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); 

Here is sample code from the second script:

$(document).ready(function()
 {

    var selectoptions = {
            "Option 1": {
                 "key" : "Option 1",
                 "defaultvalue" : 1,
                 "values" : {
                    "sub-option 1": "sub-option 1",
                    "sub-option 2": "sub-option 2",
                    "sub-option 3": "sub-option 3"

          }
    },

"Option 2": {
                 "key" : "Option 1",
                 "defaultvalue" : 1,
                 "values" : {
                    "sub-option 1": "sub-option 1",
                    "sub-option 2": "sub-option 2",
                    "sub-option 3": "sub-option 3"

          }
    },

"Option 3": {
                 "key" : "Option 1",
                 "defaultvalue" : 1,
                 "values" : {
                    "sub-option 1": "sub-option 1",
                    "sub-option 2": "sub-option 2",
                    "sub-option 3": "sub-option 3"

          }
    },

 };

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

 });

The sample form html Im using is:

<form action="" method="post" enctype="multipart/form-data"> 
<input type="hidden" name="action" value="1" />

<fieldset> 

<select type="text" name="address[state]" id="first" value="<?php // echo $_POST["address"]["state"]; ?>" class="short" tabindex="15"><option value="">--</option></select>

<select type="text" name="address[city]" id="second" value="<?php // echo $_POST["address"]["city"]; ?>" class="short" tabindex="16"><option value="">--</option></select>

</fieldset>                        

<input type="submit" name="submit" id="submit" class="button grey" tabindex="15" value="<?php echo SPEC($GLOBALS['_LANG']['_tpl_myaccount33']) ?>" />

</form>

Thanks for any help with this problem. Appreciate it.

Answer 1

Could it be because your form has no action?