Question

我构建了一个简单的搜索框，其中有一个选择输入框，有多个选项可供选择。我有以下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'
        ) ); ?>

Answer 1

这是localStorage的更新答案。我在这里创建了一个个人网站供您参考：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兼容。如果它不是，那么它什么都不做。第二个函数isInArray我从stackoverflow中提取。它几乎检查一个值是否是一个JS数组。

然后我得到多选工作。我检查浏览器是否支持localStorage，然后检查我设置的localStorage变量＆＃34; check＆＃34;是空的。如果它是空的那么我继续前进。如果不是我做的是使用多选方法来获取每个的输入，如果输入的值在localStorage变量中＆＃34;检查＆＃34; （这是一个数组）然后我手动点击用户的复选框（multiselect的作者建议）。

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

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

1 个答案: