我构建了一个简单的搜索框,其中包含一个选择输入框,其中包含多个选项供您选择。我有以下Jquery多选脚本正在运行和工作:
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'
) ); ?>
这是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兼容。如果不是,那么它不会做任何事情。第二个函数是 InArray I 从 stackoverflow 中提取的。它几乎检查一个值是否是JS数组。
然后我开始多选工作。我检查浏览器是否支持 localStorage,然后检查我设置的"checked"的 localStorage 变量是否为空。如果它是空的,那么我只是继续前进。如果不是我所做的是使用多选方法来获取每个方法的输入,如果输入的值在"选中"的 localStorage 变量(这是一个数组)中,那么我手动单击用户的复选框(多选的作者建议)。
在表单提交时,我停止它,设置 localStorage 变量以包含数组中的所有选择输入的值,然后允许表单提交。随时问我任何问题。它现在正在工作。