DropDown lost selected values after Refresh

Question

I have a dropdown when user selects the option, the value is passed, but after the page refreshes i wanna retain the selected value(but now they are set to default) so user knows what was selected. Any hope.

i know this may be duplicate but i have not find any helpful answer in duplicate questions

My dropdown

<select id="Selection">
    <option value="">Sort by</option>
    <option value="0">Code</option>
    <option value="1">Title A-Z</option>
    <option value="2">Title Z-A</option>
    <option value="3">Brand</option>
    <option value="4">Lowest price</option>
    <option value="5">Highest price</option>
    <option value="6">Lowest Quantity</option>
    <option value="7">Highest Quantity</option>
</select>

Jquery

$(document).ready(function () {
    $("#Selection").change(function () {
        var item = $(this).find(":selected").val();

        $.ajax({
            url: "/Cook/AddCookies",
            data: { item: item },
            type: 'POST',
            // contentType: 'application/json; charset=utf-8',
            success: function (data) {

                // Variable data contains the data you get from the action method
            }
        });
    });

You will need to include a bit more information in your question. What server technology are you using? How is the postback initiated? Do you have an example page / demo you can share? — PriorityMark, Jun 25 '14 at 14:27
possible duplicate of [How to get JS variable to retain value after page refresh?](http://stackoverflow.com/questions/16206322/how-to-get-js-variable-to-retain-value-after-page-refresh) — PaulBinder, Jun 25 '14 at 14:34
that solution is not working for me , if u can do plz make a jsfiddle @PaulBinder — Jot Dhaliwal, Jun 25 '14 at 14:38
I provided an example in my answer below. I did not provide it in JSfidle as I had no ajax method to connect to. — PaulBinder, Jun 25 '14 at 15:04

PaulBinder · Answer 1 · 2014-06-25T15:23:05.570

Sure I can provide an example. Since you said "action method" I am assuming you are using MVC asp.net. Sorry if this is incorrect. My example will be using it.

View

<select id="Selection">
    <option value="">Sort by</option>
    <option value="0">Code</option>
    <option value="1">Title A-Z</option>
    <option value="2">Title Z-A</option>
    <option value="3">Brand</option>
    <option value="4">Lowest price</option>
    <option value="5">Highest price</option>
    <option value="6">Lowest Quantity</option>
    <option value="7">Highest Quantity</option>
</select>

<script>
    $(document).ready(function () {
        var someVarName = JSON.parse(localStorage.getItem("someVarName"));
        if (someVarName.itemNumber != null) {
            var number = parseInt(someVarName.itemNumber) + 1;
            $('select>option:eq(' + number +')').attr('selected', true);
        }

        $("#Selection").change(function () {
            var item = $(this).find(":selected").val();

            $.ajax({
                url: "/Home/MyAction",
                data: { item: item },
                type: 'POST',
                // contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    localStorage.setItem("someVarName", JSON.stringify(data));
                }
            });
        });
    });
</script>

Controller

   [HttpPost]
    public JsonResult MyAction(string item)
    {
        return Json(new {itemNumber = item, value = "your data"});
    }

There will clearly need to be cleanup and error handling. This should set you on the right path however.

Also note that I was just using ajax to sync with your sample assuming that you are doing some sort of processing with the value passed into the server. If you are not you can easily do something like this

<select id="Selection">
    <option value="">Sort by</option>
    <option value="0">Code</option>
    <option value="1">Title A-Z</option>
    <option value="2">Title Z-A</option>
    <option value="3">Brand</option>
    <option value="4">Lowest price</option>
    <option value="5">Highest price</option>
    <option value="6">Lowest Quantity</option>
    <option value="7">Highest Quantity</option>
</select>

<script>
    $(document).ready(function () {
        var someVarName = localStorage.getItem("someVarName");
        if (someVarName != null) {
            var number = parseInt(someVarName) + 1;
            $('select>option:eq(' + number + ')').attr('selected', true);
        }

        $("#Selection").change(function () {
            var item = $(this).find(":selected").val();
            localStorage.setItem("someVarName", item);
        });
    });
</script>

If this data is client side only then localstorage is much better than storing it via cookie. See this for details : http://stackoverflow.com/questions/3220660/local-storage-vs-cookies — PaulBinder, Jun 25 '14 at 15:33
This cannot work in a JS fiddle example. Due to the fact that we are using localstorage. Nor will the ajax one work as we have no real server to connect to. Show your code that is not working and related controller methods. . — PaulBinder, Jun 25 '14 at 15:44
i paste your code , that is additional from my question , mainly of the localstorage — Jot Dhaliwal, Jun 25 '14 at 15:47
Without error messages or your code to go by there is not much I can go by. The code I posted works and is straight out of a SLN i created. — PaulBinder, Jun 25 '14 at 15:50

score -1 · Accepted Answer · answered Jun 25 '14 at 15:47

Solved

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

<select id="Selection">
    <option value="">Sort by</option>
    <option value="0">Code</option>
    <option value="1">Title A-Z</option>
    <option value="2">Title Z-A</option>
    <option value="3">Brand</option>
    <option value="4">Lowest price</option>
    <option value="5">Highest price</option>
    <option value="6">Lowest Quantity</option>
    <option value="7">Highest Quantity</option>
</select>

<script>
    $(document).ready(function () {
        var val = getCookie("TestCookie");
        $("#Selection").val(val);

        $("#Selection").change(function () {
            var item = $(this).find(":selected").val();

            $.ajax({
                url: "/Cook/AddCookies",
                data: { item: item },
                type: 'POST',
                success: function (data) {
                }
            });
        });

    });

    function getCookie(name) {
        var re = new RegExp(name + "=([^;]+)");
        var value = re.exec(document.cookie);
        return (value != null) ? unescape(value[1]) : null;
    }
</script>

This does not show the complete answer (like how AddCookies populates a cookie) as well as uses a cookie to store something that local-storage seems better suited for. — PaulBinder, Jun 25 '14 at 17:32

DropDown lost selected values after Refresh

2 Answers2