how to retain selected value on refreshing page? - javascript

jquery
(function($) {
$(document).ready( function() {
$('#client-list').change(function() {
$(this).attr("selected", true);
location.reload();
});
});
});
dropdown list
<select id="client-list">
<option value="Choose-Client">Choose Client</option>
<option value="client1" >Client 1</option>
<option value="client2" >Client 2</option>
<option value="client3" >Client 3</option>
<option value="client4" >Client 4</option>
</select>
how can i retain selected value and reload the page onchange dropdown?

Store you values in localStorage
First fetch value from localStorage and set it as value of your select, if it's undefined (when run the first time), it will fall back to first element in your select.
If it is defined, then your select will have value from localStorage as selected value.
On change, update your value in localStorage
(function($) {
const selection = localStorage.getItem('selection');
$(document).ready( function() {
let $clientList = $('#client-list');
$clientList.val(selection);
$clientList.change(function() {
localStorage.setItem('selection', $(this).val());
});
});
});

You can do this using cookies in Jquery by using a plugin.
https://github.com/js-cookie/js-cookie
Download the plugin and include it in your project
<script src="/path/to/js.cookie.js"></script>
To set cookie
Cookies.set('name', 'value');
To read cookie
Cookies.get('name'); // => 'value'

Related

Dropdown in HTML is empty at initialization due to Javascript

I've created in an html webpage a dropdown with four options. It worked well but I realized that when the page was refreshed, the value would reset itself to the first option. Since I wanted the user's choice to be kept in memory, I added a javascript code snippet that I found somewhere.
It works very well, except that at the initialization the default value of the dropdown is an empty field.
I would need the first option to be displayed at initialization.
I guess it's easy but I don't know JavaScript at all. Could you please help?
Here is what the code looks like:
<select name="options" id='dropdown'>
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
<option value="4">4th Option</option>
</select>
<!-- The script below helps to keep in memory the dropdown value after the page has been refreshed -->
<script type="text/javascript">
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
</script>
I think you should check if SessionStorage Key exists or not.
I have created working example of your code : https://jsfiddle.net/vieckys/Lwv1n8p7/7/
Here is HTML Markup:
<select name="options" id='dropdown'>
<option value="0" selected>--- select here ---</option>
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
<option value="4">4th Option</option>
</select>
and JS Code
let selectedItem = sessionStorage.getItem("SelectedItem");
if (selectedItem) {
$('#dropdown').val(selectedItem);
} else {
$('#dropdown').val(0);
}
$('#dropdown').change(function() {
let dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
Let me know if you face any issue with this.
Based on your scenario, you can explicitly trigger the change event after the value is set for the dropdown using trigger('change') on the select dropdown. This will run the change function and will save the initial value in the sessionStorage. So, add this line of code, $('#dropdown').trigger('change') something like:
<script type = "text/javascript" >
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
$('#dropdown').trigger('change'); // trigger the change explicitly
</script>

Update variable in JS based on selected option from dropdown

I have this dropdown, where I want to change the variable in my js script based on which option is selected. The variable is send to another function which updates the page.
My html file:
//My JS function that is trying to access the data from the dropdown
function updateDD(){
$(".sheetnameSelect").change(function(){
return $(this).find(":selected").text()
})
}
//I want to use that function to update another variable based on selected option
var selected = updateDD()
alert(selected)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sheetnameSelect'>
<option value="Cars">Cars</option>
<option value="Homes">Homes</option>
<option value="Planes">Planes</option>
</select>
However the function updateDD() is not returning the selected option (both when the pages loads or when I select different option)
You might not need to return the value, you can call the method whenever there is a change in select:
$(".sheetnameSelect").on('change', function() {
var selected = $(this).val();
createTable(selected);
});
function createTable(value) {
console.log(value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sheetnameSelect'>
<option value="Cars">Cars</option>
<option value="Homes">Homes</option>
<option value="Planes">Planes</option>
</select>

JQuery , syncronized selection option

I have to tag in my jsp with two identical select option.
I want that anytime I am chaining one , the second (that is in the bottom ) will change too.
<select class="groups">
<option class='America' value='America'>America</option>
<option class='Europe' value='Europe'>Europe</option>
<option class='Asia' value='Asia'>Asia</option>
<select>
<select class="groups">
<option class='America' value='America'>America</option>
<option class='Europe' value='Europe'>Europe</option>
<option class='Asia' value='Asia'>Asia</option>
<select>
So for instance anytime I am choosing Europe ( or any other ) I want all of my select get updated with the same value.
without jquery:
document.getElementsByClassName("groups").forEach(function(element){
element.onchange = function(event) {
document.getElementsByClassName("groups").forEach(function(x){
x.value = event.target.value;
});
}
});
with jquery:
$('.groups').onchange = function(e){
$('.groups').forEach(function(x){
x.val(e.currentTarget().val)
});
}

Save and reset values from drop down list

I have drop down list, after select value from it I push the button and some calculations are made. I save value from list by this:
<select name="dropDownTo" id="dropDownTo">
<option value="Yard">Yard</option>
<option value="Feet">Feet</option>
<option value="Metre">Metre</option>
</select>
<button onclick="MyFunc()">Update</button>
<script>
document.getElementById("dropDownTo").onchange = function() {
localStorage['dropDownTo'] = document.getElementById("dropDownTo").value;
}
function MyFunc(){
document.getElementById("dropDownTo").value = localStorage['dropDownTo'];
window.onload = document.getElementById("dropDownTo").value;
alert(document.getElementById("dropDownTo").value);
}
</script>
But the select value stay selected after closing the window. Is it possible restore default value after closing the page?
You should run an action before the page exits, restoring the value to its default. There is a javascript event for that. Window.onbeforeunload
window.onbeforeunload = function(){
return 'You are leaving this page';
}
Setting a value as selected will initially select that value every time the page is loaded:
<option value="value2" selected>Value 2</option>

Alternative to .change in jquery?

I'm trying to fire an ajax event, and passing the value of select list options as arguments in the ajax call. Unfortunately, I'm firing the call on the .change event, and it is passing the values of the select option before the new option has been selected (i.e passing the previously selected options values). Is there an event which will get the current values of the option selected? Much thanks in advance,
<select id='theList'>
<option> Option 1</option>
<option> Option 2</option>
</select>
In the JS:
$('#theList').change( function() {
$.getJSON('Home/MethodName', { var1: Option1Value, var2: MiscValue}, function(data) {
//Execute instructions here
}
)});
I wanted to use .trigger, but I think that fires beforehand as well.
I think .change() is what you want, but you're misusing it. The change event fires after the value has changed. In your handler, you need to read the new value:
$('#theList').change( function() {
var value = $('#theList').val();
$.getJSON('Home/MethodName', { your_key: value }, function(data) {
// ...
}
)});
You also might want to set values on your <option> tags:
<option value="something"> Option 2</option>
You must be doing something wrong when getting the current select value. The following works correctly for me.
http://jsfiddle.net/TJ2eS/
<select id="demo">
<option value=""></option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
$("#demo").change(function() {
alert("current select value " + $(this).val());
});
A word of warning, .change is now defunct, you should use...
.on('change', function()
Like that.

Categories

Resources