Reputation: 1500
I have a dropdown when user selects the option, the value is passed, but after the page refreshes i wanna retain the selected value(but now they are set to default) so user knows what was selected. Any hope.
i know this may be duplicate but i have not find any helpful answer in duplicate questions
My dropdown
<select id="Selection">
<option value="">Sort by</option>
<option value="0">Code</option>
<option value="1">Title A-Z</option>
<option value="2">Title Z-A</option>
<option value="3">Brand</option>
<option value="4">Lowest price</option>
<option value="5">Highest price</option>
<option value="6">Lowest Quantity</option>
<option value="7">Highest Quantity</option>
</select>
Jquery
$(document).ready(function () {
$("#Selection").change(function () {
var item = $(this).find(":selected").val();
$.ajax({
url: "/Cook/AddCookies",
data: { item: item },
type: 'POST',
// contentType: 'application/json; charset=utf-8',
success: function (data) {
// Variable data contains the data you get from the action method
}
});
});
Upvotes: 4
Views: 9983
Reputation: 1500
Solved
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<select id="Selection">
<option value="">Sort by</option>
<option value="0">Code</option>
<option value="1">Title A-Z</option>
<option value="2">Title Z-A</option>
<option value="3">Brand</option>
<option value="4">Lowest price</option>
<option value="5">Highest price</option>
<option value="6">Lowest Quantity</option>
<option value="7">Highest Quantity</option>
</select>
<script>
$(document).ready(function () {
var val = getCookie("TestCookie");
$("#Selection").val(val);
$("#Selection").change(function () {
var item = $(this).find(":selected").val();
$.ajax({
url: "/Cook/AddCookies",
data: { item: item },
type: 'POST',
success: function (data) {
}
});
});
});
function getCookie(name) {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
</script>
Upvotes: -1
Reputation: 2052
Sure I can provide an example. Since you said "action method" I am assuming you are using MVC asp.net. Sorry if this is incorrect. My example will be using it.
View
<select id="Selection">
<option value="">Sort by</option>
<option value="0">Code</option>
<option value="1">Title A-Z</option>
<option value="2">Title Z-A</option>
<option value="3">Brand</option>
<option value="4">Lowest price</option>
<option value="5">Highest price</option>
<option value="6">Lowest Quantity</option>
<option value="7">Highest Quantity</option>
</select>
<script>
$(document).ready(function () {
var someVarName = JSON.parse(localStorage.getItem("someVarName"));
if (someVarName.itemNumber != null) {
var number = parseInt(someVarName.itemNumber) + 1;
$('select>option:eq(' + number +')').attr('selected', true);
}
$("#Selection").change(function () {
var item = $(this).find(":selected").val();
$.ajax({
url: "/Home/MyAction",
data: { item: item },
type: 'POST',
// contentType: 'application/json; charset=utf-8',
success: function (data) {
localStorage.setItem("someVarName", JSON.stringify(data));
}
});
});
});
</script>
Controller
[HttpPost]
public JsonResult MyAction(string item)
{
return Json(new {itemNumber = item, value = "your data"});
}
There will clearly need to be cleanup and error handling. This should set you on the right path however.
Also note that I was just using ajax to sync with your sample assuming that you are doing some sort of processing with the value passed into the server. If you are not you can easily do something like this
<select id="Selection">
<option value="">Sort by</option>
<option value="0">Code</option>
<option value="1">Title A-Z</option>
<option value="2">Title Z-A</option>
<option value="3">Brand</option>
<option value="4">Lowest price</option>
<option value="5">Highest price</option>
<option value="6">Lowest Quantity</option>
<option value="7">Highest Quantity</option>
</select>
<script>
$(document).ready(function () {
var someVarName = localStorage.getItem("someVarName");
if (someVarName != null) {
var number = parseInt(someVarName) + 1;
$('select>option:eq(' + number + ')').attr('selected', true);
}
$("#Selection").change(function () {
var item = $(this).find(":selected").val();
localStorage.setItem("someVarName", item);
});
});
</script>
Upvotes: 2