How to retain a value of dropdown using JS?

Question

I have a three dropdown with 1 submit button. Now, I'm trying to retain the value of each dropdown after the user clicked the input submit. But the Jquery I have is not working. I use PHP to displayed the output of the dropdown when the user clicked it.

Note: The page is refresh when the user clicked the input submit.

How to fix this? See in plunker

JS:

$(document).ready(function(){
    $('#dropdown').change(function(){
        var option = $(this).find('option:selected').val();
        $('#dropdown').val(option);
    });

});

Answer 1

You can get the values easily by making use of the model attribute present in the select element.

First add a onclick function like so

<input type="submit" name="submit" value="Submit" onclick="getValues()"/>

Then get the value on submit of the button(Entire code) Plunkr

I had a look at your code, the way your selectbox rendering is setup we have to explicitly call the updateSelect() function for the options to work well. This function makes your selectbox "dynamic".

var first = localStorage.getItem("firstDropDown");
var second = localStorage.getItem("secondDropDown");
var third = localStorage.getItem("thirdDropDown");

if(first !== null && second !== null && third !== null) {
  setValues(); //this should come after getting  the values above
}

function getValues() {
  var first = document.getElementsByTagName("SELECT")[0].getAttribute("model");
  var second = document.getElementsByTagName("SELECT")[1].getAttribute("model");
  var third = document.getElementsByTagName("SELECT")[2].getAttribute("model");

  localStorage.setItem("firstDropDown", first);
  localStorage.setItem("secondDropDown", second);
  localStorage.setItem("thirdDropDown", third);
}

//on load when this function is called globally, the values from the localStorage will be set to the dropdown values.
function setValues() {
  //for first dropdown
  document.getElementsByTagName("SELECT")[0].setAttribute("model", first); 
  document.getElementsByTagName("SELECT")[0].value = first;
  updateSelect(document.getElementsByTagName("SELECT")[0]);
  //for second dropdown
  document.getElementsByTagName("SELECT")[1].setAttribute("model", second);
  document.getElementsByTagName("SELECT")[1].value = second;
  updateSelect(document.getElementsByTagName("SELECT")[1]);
  //for third dropdown
  document.getElementsByTagName("SELECT")[2].setAttribute("model", third);
  document.getElementsByTagName("SELECT")[2].value = third;
  updateSelect(document.getElementsByTagName("SELECT")[1]);
}

To retain the value you have no choice but to use a window.localStorage like so -

localStorage.setItem("firstDropDown", first);
localStorage.setItem("secondDropDown", second);
localStorage.setItem("thirdDropDown", third);

Then fetch the value

var first = localStorage.getItem("firstDropDown");
var second = localStorage.getItem("secondDropDown");
var third = localStorage.getItem("thirdDropDown");