在jQuery UI中重新加載頁面后如何保持字段選擇的值

Question

我想在頁面刷新后保留選定的值，使用jquery UI selectable https://jqueryui.com/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>

什么是實現這一目標的最佳方法

Answer 1

只需將值存儲在cookie中，然后在document.load方法中引用它即可。

從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);
}

然后使用此調用在函數中創建cookie：

createCookie('StoredValueName', selectedValue, 1)

Answer 2

使用Selected事件並將您為項目提供的ID存儲為HTML5存儲對象

在初始頁面加載時，您應該檢查存儲項目並將選定的類賦予具有匹配ID的項目

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

最好在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