在jQuery UI中重新加载页面后如何保持字段选择的值

Question

I want to keep the selected values after page refresh, Am using jquery UI selectable https://jqueryui.com/selectable/ 我想在页面刷新后保留选定的值，使用jquery UI selectable https://jqueryui.com/selectable/

here's the code sample of jquery selectable 这是可选的jquery的代码示例

<!doctype html>
 <html lang="en">
  <head>
<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-
ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

  <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 
  18px; 
  }
  </style>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
 $( function() {
   $( "#selectable" ).selectable();
 } );
  </script>
</head>
<body>

<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
 <li class="ui-widget-content">Item 2</li>
 <li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
 <li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>

What's the best approach to achieve this 什么是实现这一目标的最佳方法

Answer 1

Just store the value in a cookie and reference it in the document.load method. 只需将值存储在cookie中，然后在document.load方法中引用它即可。

From QuirksMode (including escaping characters) 从QuirksMode（包括转义字符）

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Then create the cookie in the function using this call: 然后使用此调用在函数中创建cookie：

createCookie('StoredValueName', selectedValue, 1)

Answer 2

Use the Selected event and store the id you give the item as a HTML5 Storage Object 使用Selected事件并将您为项目提供的ID存储为HTML5存储对象

At initial page load you should check the storage item and give the selected class to the item with the matched ID 在初始页面加载时，您应该检查存储项目并将选定的类赋予具有匹配ID的项目

$(storageId ,'#selectable').addClass('ui-selected');

It's probably better to use the storage object over a cookie since it is likely client-side who uses this information. 最好在cookie上使用存储对象，因为客户端可能在使用此信息。

在jQuery UI中重新加载页面后如何保持字段选择的值

问题描述

2 个解决方案

解决方案1
1 2017-09-10 10:54:44

解决方案2
0 2017-09-10 11:14:05

在jQuery UI中重新加载页面后如何保持字段选择的值

问题描述

2 个解决方案

解决方案1 1 2017-09-10 10:54:44

解决方案2 0 2017-09-10 11:14:05

解决方案1
1 2017-09-10 10:54:44

解决方案2
0 2017-09-10 11:14:05