提交查询后如何保留选择状态答案

【问题标题】：How to retain the select state after submitting a query提交查询后如何保留选择状态
【发布时间】：2015-02-04 23:31:36
【问题描述】：

我构建了一个简单的搜索框，它有一个选择输入框，其中有多个选项可供选择。我有以下 Jquery Multiselect 脚本正在运行和工作：

http://www.erichynds.com/blog/jquery-ui-multiselect-widget

但我唯一的问题是，在选择一个选项并点击提交后，选择的选项被清除。我需要的是刷新页面时所选选项保持选中状态。

我一直在尝试寻找类似的问题，但似乎无法获得明确的解决方案。这是我的 Jquery 脚本。谁能帮我解决这个问题？

<script type="text/javascript">
$(function(){
    $("select").multiselect({
        selectedList: 4
    }).multiselectfilter();

});
</script>

更新 HTML 选择代码：

                <select height="100" name="selSea" id="selSeaShells" size="5" multiple="multiple" onchange="loopSelected()">
                        <option value="">Search all clients</option>
                    <optgroup label="IMC COE1">
                        <option value="ACXSYS">ACXSYS</option>
                        <option value="ALC">ALC</option>
                        <option value="CDPQ">CDPQ</option>
                        <option value="CIBC">CIBC-CMO</option>
                        <option value="Interac">Interac</option>
                        <option value="Trade360">Trade360</option>
                    <optgroup label="IMC COE2">
                        <option value="B&I">B+I</option>
                        <option value="CGI Calgary">CGI-Calgary</option>
                        <option value="CIBC-PM">CIBC-PM</option>
                        <option value="CIU">CIU</option>
                        <option value="CPA">CPA</option>
                        <option value="CPC">CPC</option>
                        <option value="Davis & Henderson">D+H (Resolve)</option>        
                        <option value="DFAIT">DFAIT</option>
                        <option value="DOJ">DOJ</option>
                        <option value="Emera">Emera</option>
                        <option value="Energy Solutions">Energy Solutions</option>
                        <option value="FinanciaLinx">FinanciaLinx</option>
                        <option value="Greystone">Greystone</option>    
                        <option value="IIS-ICS">IIS-ICS</option>
                        <option value="Innovapost">Innovapost</option>
                        <option value="Northern Trust">Northern Trust</option>
                        <option value="OLG">OLG</option>        
                        <option value="Purolator">Purolator</option>
                        <option value="SCU-CUSS">SCU-CUSS</option>  
                        <option value="Wealth360">Wealth360</option>                
                        <option value="WSCC">WSCC</option>      
                        <option value="WSIB">WSIB</option>
                 </select>

2 月 4 日更新 PHP 代码：

    <?php
        echo $hm->Button( array( 
            '<>'=>'<image/>',
            'name'=>"_sc=_this/search_pxy&_ssc=edit_init&{$param}&",
            'src'=>'icon_edit.gif',
            'value'=>RSTR_EDIT,
            'class'=>'btn_icon_edit'
        ) ); ?>

【问题讨论】：

将它们存储在 cookie 或 localStorage onsubmit 中，然后在页面加载时加载它们。
由于您将数据发布到服务器，只需从服务器返回数据并选择您的多选。
您将需要某种类型的持久性。查看 html5 的本地存储或通过请求发送有关表单的元数据，并在服务器端对其进行处理（数据库存储/返回响应）
是的，我遇到了类似的答案，但不知道如何使用我的脚本来解决这个问题，对于编码来说仍然很新。有人有我可以看的例子吗？

标签： javascript php jquery html

【解决方案1】：

这是本地存储的更新答案。我在这里创建了一个个人网站供您参考：http://localstorage.nfshost.com/

现在我将转储代码并解释每个部分：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.min.js"> </script>
<link rel="stylesheet" href="jquery.multiselect.css" />
<script type="text/javascript">
function supports_html5_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}
function isInArray(value, array) {
  return array.indexOf(value) > -1;
}
$(document).ready(function() {
  $('#thelocalvalue').multiselect({
    header: "choose an option!"
  });
  if (supports_html5_storage()) {
   if (typeof localStorage['checked'] != 'undefined') {
  if (localStorage['checked'].length > 0 && localStorage['checked'] != null) {
    $('#thelocalvalue').multiselect('widget').find(':checkbox').each(function() {
      console.log(localStorage['checked']);
      if (isInArray($(this).val(),localStorage['checked'])) {
        this.click();
      }
      //console.log($(this).val());
     });
  } 
}
  $('#localhero').submit(function(e

) {
       e.preventDefault();
       localStorage['checked'] = $('#thelocalvalue').val();
       this.submit();
  });
  }
else {
  console.log('localstorage not supported');
}
});
</script>
</head>
<body>
<form id="localhero">
  <select id="thelocalvalue" multiple="multiple">
   <option value="1"> electron </option>
   <option value="2"> Delinger </option>
  </select>
  <input type="submit" />
</form>
</body>
</html>

让我们从顶部的第一个函数开始：supports_html5_storage - 这个函数只是检查用户的浏览器是否与 localStorage 兼容。如果不是，那么它什么也做不了。第二个函数是我从 stackoverflow 中提取的 InArray。它几乎可以检查一个值是否是一个 JS 数组。

然后我开始多选工作。我检查浏览器是否支持 localStorage，然后我设置“checked”的 localStorage 变量是否为空。如果它是空的，那么我只是继续前进。如果不是我所做的是使用多选方法来获取每个的输入，如果输入的值在 localStorage 变量“checked”（这是一个数组）中，那么我手动单击用户的复选框（多选的作者建议)。

在表单提交时，我停止它，将 localStorage 变量设置为包含数组中所有选择输入的值，然后允许表单提交。有问题尽管问我。它现在正在工作。

【讨论】：

是的，这对我来说可能有点太高级了，我对如何在我的代码中实现它有点困惑。我用我的选择代码更新了主要问题。不太清楚我应该怎么把它放进去。
啊，是的，如果你要将数据保存到数据库中，你只能在你的代码中实现这个，我可以用 localstorage 和 JS 来做一个选项，我只是想知道更多关于什么您正计划使用选定的值。搜索本身是否有效？
我已经设置了这个工具phpkobo.com/address_book.php 及其基本可定制的地址簿。我有一个搜索页面，可以让我在我的 MYSQL 数据库中搜索联系人，它可以让我将数据输入到我的数据库中。一切正常，但只是当我使用 Jquery 多选搜索某些内容时，它会在刷新结果时清除我的选择。我尝试过实施本地存储解决方案，但似乎找不到一个简单的示例来复制到我的网站。
我已经更新了使用 JS localStorage 的答案，并提供了一个您可以参考的工作示例。我什至包括了多选细节。如果您有任何问题，请告诉我。
成功了！您是皇室成员，我也非常感谢您的详细回复。