今天我遇到了一个问题,我希望在页面刷新后我的所选选项能成为默认值。例如,我有以下代码:
<select id="options">
<option value="0">Apple</option>
<option value="1">Orange</option>
<option value="2">Mango</option></select>
我的UI默认是苹果,所以我希望当我点击橙色选项时,它将成为刷新页面时的默认值。有没有办法做到这一点?谢谢
今天我遇到了一个问题,我希望在页面刷新后我的所选选项能成为默认值。例如,我有以下代码:
<select id="options">
<option value="0">Apple</option>
<option value="1">Orange</option>
<option value="2">Mango</option></select>
我的UI默认是苹果,所以我希望当我点击橙色选项时,它将成为刷新页面时的默认值。有没有办法做到这一点?谢谢
<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()函数中
在演示页面运行代码后,尝试重新加载页面,您将看到结果!
localStorage
是一个 HTML5 的功能。 - PugazhsessionStorage
而不是localStorage
。(否则,语法完全相同。)它只会在浏览器关闭前保留。 - Scott Mermelstein<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>
将selected="selected"设置为您希望成为默认选项的选项。
<option selected="selected">
default
</option>