在刷新后是否有一种方法可以使所选选项成为默认值？

Question

今天我遇到了一个问题，我希望在页面刷新后我的所选选项能成为默认值。例如，我有以下代码：

<select id="options">
<option value="0">Apple</option> 
<option value="1">Orange</option> 
<option value="2">Mango</option></select>

我的UI默认是苹果，所以我希望当我点击橙色选项时，它将成为刷新页面时的默认值。有没有办法做到这一点？谢谢

- user3213861

---

使用cookie来存储所选选项，并在页面重新加载时设置相同的选项。 - Pugazh

Answer 1

我认为本地存储可以帮助您。例如：

<select id="options">
<option value="0">Apple</option> 
<option value="1">Orange</option> 
<option value="2">Mango</option></select>

Javascript

$("#options").on("change", function(){
    var val = $(this).val();
    // save to local
    if(window.localStorage){
        window.localStorage.setItem("#options-val", val);
    }
});

if(window.localStorage){
    var item = window.localStorage.getItem("#options-val");
    if(item) $("#options").val(item);
}

请查看演示

所有的js代码都必须放在$(document).ready()函数中

在演示页面运行代码后，尝试重新加载页面，您将看到结果！

- Farkhat Mikhalko

---

Fiddle是空的 FUserThrowError - user3213861

@user3213861 我忘记添加链接了)) - Farkhat Mikhalko

localStorage 是一个 HTML5 的功能。 - Pugazh

@SyncCircles如果你仔细阅读问题，你会发现问题中没有提及任何要求！ - Farkhat Mikhalko

@FUserThrowError：我同意。我只是把它作为额外的信息提到了。 - Pugazh

一个建议：使用sessionStorage而不是localStorage。（否则，语法完全相同。）它只会在浏览器关闭前保留。 - Scott Mermelstein

Answer 2

使用onchange来设置一个会话cookie，然后在页面加载时设置option.selected。

<select id="options" onChange="document.cookie='fruit='+this.value;">
<option value="0">Apple</option> 
<option value="1">Orange</option> 
<option value="2">Mango</option></select>

<script type="text/javascript">
<!--
function getCookie(cname)
{
/* http://www.w3schools.com/js/js_cookies.asp */
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
  {
  // var c = ca[i].trim(); // trim not supported on IE8
  var c = ca[i].replace(/^\s+|\s+$/gm,'');
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
return "";
} 
window.onload = function() {
    var v = getCookie('fruit');
    if (v) document.getElementById('options').options[v].selected = true;
}
//-->
</script>

- Matt

Answer 3

将selected="selected"设置为您希望成为默认选项的选项。

<option selected="selected">
  default
</option>

- JA9