keep selected option value when page reload

问题: I want to keep selected option after page refresh. this my code is : window.onload = function() { var selItem = sessionStorage.getItem("SelItem"); jQuery('#me2000 .te...

问题:

I want to keep selected option after page refresh. this my code is :

window.onload = function() {
  var selItem = sessionStorage.getItem("SelItem");
  jQuery('#me2000 .term').val(selItem);
}
jQuery('#me2000 .term').change(function() {
  var selVal = jQuery(this).val();
  sessionStorage.setItem("SelItem", selVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="me2000">
  <select id="sort-item" class="term">
    <option value="option 1" data-sort="1">option 1</option>
    <option value="option 2" data-sort="2">option 2</option>
    <option value="option 3" data-sort="3">option 3</option>
  </select>
  <select id="sort-item2" class="term">
    <option value="option 4" data-sort="4">option 4</option>
    <option value="option 5" data-sort="5">option 5</option>
    <option value="option 6" data-sort="6">option 6</option>
  </select>
</div>

for one <select> tag this code is work. but for two <select> not working. can any one help me?


回答1:

Have a go with this

Uncomment and comment as instructed

DEMO

// remove this on your server
let selItems = [{ "sort-item": "option 2" }, { "sort-item2": "option 5" } ];
// uncomment this
// let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];  

$(function() {
  if (selItems) {
    selItems.forEach(obj => {
      const [k, v] = Object.entries(obj)[0]
      $("#" + k).val(v)
    })
  }
  $('.term').on("change", function() {
    selItems = $('.term').map(function() {
      return { [this.id]: this.value }
    }).get();
  // remove this
  console.log(selItems);
  // uncomment this on your server
  // sessionStorage.setItem("SelItem", JSON.stringify(selItems))

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="me2000">
  <select id="sort-item" class="term">
    <option value="option 1" data-sort="1">option 1</option>
    <option value="option 2" data-sort="2">option 2</option>
    <option value="option 3" data-sort="3">option 3</option>
  </select>
  <select id="sort-item2" class="term">
    <option value="option 4" data-sort="4">option 4</option>
    <option value="option 5" data-sort="5">option 5</option>
    <option value="option 6" data-sort="6">option 6</option>
  </select>
</div>


回答2:

Looks like you Jquery is at the Div not the select tag

i think it should read

<script>
 window.onload = function() {
    var selItem = sessionStorage.getItem("SelItem");  
    jQuery('#sort-item.term').val(selItem);
    }
    jQuery('#sort-item2.term').change(function() { 
        var selVal = jQuery(this).val();
        sessionStorage.setItem("SelItem", selVal);
    });
 </script>

or you should assign a different class to the other select option, and change one of the JQuery Classes to the class you made.

  • 发表于 2020-06-27 20:30
  • 阅读 ( 92 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除