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

解決

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

Answer 2

當然，我可以提供一個例子。既然你說「行動方法」，我假設你正在使用MVC聊天室。很抱歉如果這是不正確的。我的例子將使用它。

查看

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