刷新后DropDown丢失了选定的值

Question

当用户选择该选项时，我有一个下拉列表，该值被传递，但在页面刷新后我想保留所选值（但现在它们被设置为默认值），因此用户知道所选内容。任何希望。

我知道这可能重复但我在重复的问题中找不到任何有用的答案

我的下拉列表

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

Answer 1

当然，我可以提供一个例子。既然你说“动作方法”我假设你正在使用MVC asp.net。对不起，如果这不正确。我的例子将使用它。

查看

<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>

<强>控制器

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

显然需要进行清理和错误处理。这应该会让你走上正确的道路。

另请注意，我只是使用ajax与您的示例同步，假设您正在使用传递到服务器的值进行某种处理。如果你不是，你可以很容易地做这样的事情

<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>

Answer 2

解决了

<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>