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

jogvjijk  于 2024-01-04  发布在  其他
关注(0)|答案(3)|浏览(105)

我今天有这个问题,我想我选择的选项将是我的页面刷新后的默认值.例如,我有这个:

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

字符串
我的UI上的默认值是苹果,所以我想要的是当我点击橙子选项时,它将是默认值,当我刷新页面.有办法做到这一点吗?谢谢

qgzx9mmu

qgzx9mmu1#

我认为本地存储可以帮助你。例如:

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

字符串
JavaScript

  1. $("#options").on("change", function(){
  2. var val = $(this).val();
  3. // save to local
  4. if(window.localStorage){
  5. window.localStorage.setItem("#options-val", val);
  6. }
  7. });
  8. if(window.localStorage){
  9. var item = window.localStorage.getItem("#options-val");
  10. if(item) $("#options").val(item);
  11. }


参见demo
所有的js代码都必须在$(document).ready()中
在演示中运行代码后,尝试重新加载页面,你会看到结果!

展开查看全部
vsaztqbk

vsaztqbk2#

使用onchange设置一个会话cookie然后设置选项.当页面加载时选择

  1. <select id="options" onChange="document.cookie='fruit='+this.value;">
  2. <option value="0">Apple</option>
  3. <option value="1">Orange</option>
  4. <option value="2">Mango</option></select>
  5. <script type="text/javascript">
  6. <!--
  7. function getCookie(cname)
  8. {
  9. /* http://www.w3schools.com/js/js_cookies.asp */
  10. var name = cname + "=";
  11. var ca = document.cookie.split(';');
  12. for(var i=0; i<ca.length; i++)
  13. {
  14. // var c = ca[i].trim(); // trim not supported on IE8
  15. var c = ca[i].replace(/^\s+|\s+$/gm,'');
  16. if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  17. }
  18. return "";
  19. }
  20. window.onload = function() {
  21. var v = getCookie('fruit');
  22. if (v) document.getElementById('options').options[v].selected = true;
  23. }
  24. //-->
  25. </script>

字符串

展开查看全部
n8ghc7c1

n8ghc7c13#

将selected=“selected”设置为您想要的默认选项。

  1. <option selected="selected">
  2. default
  3. </option>

字符串

相关问题