Fatal编程技术网
  • javascript/
  • Javascript 提交查询后如何保留select状态

Javascript 提交查询后如何保留select状态

javascript php jquery html

Javascript 提交查询后如何保留select状态,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我构建了一个简单的搜索框，它有一个选择输入框，可以从中选择多个选项。我有以下Jquery Multiselect脚本正在运行和工作： 但我唯一的问题是，在选择一个选项并点击提交后，所选的选项将被清除。我需要的是，当页面刷新时，所选选项保持选中状态 我一直试图找到类似的问题，但似乎找不到明确的解决办法。这是我的Jquery脚本。有人能帮我解决这个问题吗 <script type="text/javascript"> $(function(){ $("select").mult

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

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

我一直试图找到类似的问题，但似乎找不到明确的解决办法。这是我的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'
        ) ); ?>
这是使用localStorage更新的答案。我在这里创建了一个个人网站供您参考：

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

<!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>
让我们从顶部的第一个函数开始：支持html5存储-此函数仅检查用户的浏览器是否与本地存储兼容。如果它不是，那么它什么也做不了。 第二个函数是我从stackoverflow中提取的narray。它几乎检查一个值是否是JS数组

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

在表单提交时，我停止它，将localStorage变量设置为在数组中包含所有select输入值，然后允许表单提交。请随时问我任何问题。它现在正在工作

将它们存储在提交时的cookie或localStorage中，然后在页面加载时加载。由于您要将数据发布到服务器，只需从服务器返回数据并选择multiselect即可。您将需要某种类型的持久性。查看html5的localstorage，或者在请求中发送表单的元数据，并在服务器端数据库存储/返回中使用ResponseEyeah对其进行处理。我得到了类似的答案，但不知道如何使用我的脚本来实现这一点，这在编码方面还是非常新的。有谁能给我举个例子吗？是的，这对我来说可能有点太高级了，我对如何在代码中实现它有点困惑。我用我的选择代码更新了主要问题。我不太确定我应该如何把它放进去。啊，是的，如果你要将数据保存到数据库中，你只能在代码中实现它，我可以用localstorage和JS制作一个选项，我只是想知道更多关于你打算如何处理所选值的信息。搜索本身工作吗？我已经设置了这个工具及其基本上可自定义的通讯簿。我有一个搜索页面，可以在MYSQL数据库中搜索联系人，并将数据输入数据库。一切正常，但只是当我用jquerymultiselect搜索某些内容时，它会在刷新结果时清除我的选择。我尝试过实现一个localstorage解决方案，但似乎找不到一个简单的示例可以复制到我的站点。我已经更新了使用JS localstorage的答案，并提供了一个可供参考的工作示例。我甚至包括了多选的细节。如果你有任何问题，请告诉我。它成功了！您是皇室成员，我也非常感谢您的详细回复。