回发后如何在下拉列表中保留所选值？

Question

$("#county_id").change(function() {
    $("#vice_county_id").html("<option value=\"\">-- Select One --</option>");
    var co_id = $(this).val();
    if(co_id != 0) {
        $.getJSON('./php/includes/vice_county_web_service.php?co_id=' + co_id,function(data) {   
            $.each(data, function() {
                $("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
            });
        });
    }
});

Hi Guys, I have the above code for loading options in one drop down based on the selection in another. It works fine but to finish this up I am trying to get it to be sticky. Ie if the form is posted and county has a value already selected then the vice county pre loads with the relevant options. Basically fire the .change functionality on load. I have tried the .load and triggerhandler functionality but it does not seem to work. Any Ideas?? Thanks.

Answer 1

As far as I am aware, in order to prepopulate a form, you'll need to use server-side code. You say that the user posts his code somewhere, but you don't say how the form post is being handled.

I use ASP.net where I work, so I would have a server-side property for the value of each drop-down list. Then, when the page renders, I print the value of the property to my JavaScript code. You'll need to make your JavaScript code add the attribute selected='selected' to the option that you want to be selected when the page loads.

It sounds like you're saying that you select drop-down 1, and then the options for drop-down 2 are automatically populated. It sounds like the problem is that drop-down 2 cannot be preserved after the postback because its options are populated after the page loads (via AJAX). I believe that the solution to your problem is going to be to set the selected attribute inside code that runs when you successfully get the drop-down options via AJAX.

        $.each(data, function() {
            $("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
            //Check if the option being added was previously selected.
        });

Answer 2

Use the Cookies to store the value of the drop down change event.

and when the form loads use the same cookie to retrieve the value and display the user what ever he selected.

But maintaining cookie for this task is not recommeneded.

You can use the JSTL if its a JSP page.

Cookie creating guidlines http://www.quirksmode.org/js/cookies.html