<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body>
<form method="POST" name="" action="">
<select class="chzn-select" multiple="true" name="time" style="width:300px;" id="rememberSelected">
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="30:30">03:00</option>
<option value="04:30">04:30</option>
<option value="05:00">04:30</option>
</select>
<button type="button">Save</button>
</form>
<script type="text/javascript">
$(function() {
$(".chzn-select").chosen();
});
</script>
<script>
$("#rememberSelected").val(localStorage.getItem("selected") || 1);
$("#rememberSelected").on("change", function() {
localStorage.setItem("selected", $(this).val());
});
</script>
</body>
</html>how to save selected options at same place after click on the save button using chosen jquery even if I'm refresh the page selected option should stay at same place.
Store the selected option into localStorage and retrieve it upon page load.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
if(!!localStorage.getItem("selected")) {
$("#rememberSelected").val(localStorage.getItem("selected").split(",")).trigger("chosen:updated");
}
$("button").on("click", function() {
localStorage.setItem("selected", $("#rememberSelected").val());
});