How to save value from select in cookie using jQuery?

Question

First of all, I'm using jquery.cookie and Bootstrap material design. I have problem with save in cookie value from select.

var getval = $.cookie('selected-val');
if (getval == 10000) {
  $("#refresh option[value='10000']").attr("selected", "selected");
};
if (getval == 20000) {
  $("#refresh option[value='20000']").attr("selected", "selected");
};
if (getval == 30000) {
  $("#refresh option[value='30000']").attr("selected", "selected");
};
if (getval == 60000) {
  $("#refresh option[value='60000']").attr("selected", "selected");
};
if (getval == 180000) {
  $("#refresh option[value='180000']").attr("selected", "selected");
};
var valsel = $("#refresh").val();
$.cookie('selected-val', '' + valsel + '', {
  expires: 365,
  path: '/'
});

setInterval(function() {
  myfunction()
}, getval);

<div class="form-group">
  <div class="col-lg-12">
    <select class="form-control" id="refresh">
      <option id="ref-1" value="10000">10 s</option>
      <option id="ref-2" value="20000">20 s</option>
      <option id="ref-3" value="30000">30 s</option>
      <option id="ref-4" value="60000">1 min</option>
      <option id="ref-5" value="180000">3 min</option>
    </select>
    <br>
  </div>
</div>

I want that user can select refresh time in my function, and I don't know how to save what user selected in cookie. Always show in cookie first position.

Answer 1

Why don't you try:

jQuery(document).ready(function(){
  var selectedVal = jQuery.cookie("selected-val");
  if (selectedVal) {
    jQuery("#refresh").val(selectedVal);
  }
  jQuery("#refresh").on("change", function(){
    var selection = jQuery(this).val();
    jQuery.cookie("selected-val", selection, {expires: 365, path: '/'})
  });
});