saving the selected option not working with jquery

Question

I need to save the choice of the user.. did it this way:

$(".dateTimeFilterIdentifierCls").change(function () {
    debugger;
    localStorage.setItem('ChosenDateIndexLS', $(".dateTimeFilterIdentifierCls").find(":selected")[0].index);

});

$(document).ready(function () {

    console.log("ChosenDateIndexLS is :: ", localStorage.getItem('ChosenDateIndexLS'));
    $(".dateTimeFilterIdentifierCls").prop('selectedIndex', localStorage.getItem('ChosenDateIndexLS')); 
});

used css class in the aspx page:

  <td height="21" width="343" colspan="2" style="width: 614px;">
                        <asp:UpdatePanel ID="showsDatalistPanel" runat="server" Visible="false" UpdateMode="Always">
                            <ContentTemplate>
                                <div>
                                    <asp:DropDownList ID="dateTimeFilter" CssClass="dateTimeFilterIdentifierCls" runat="server" OnSelectedIndexChanged="dateTimeFilter_SelectedIndexChanged"
                                        onchange="bindControlEvents()" AutoPostBack="true" Visible="false">
                                    </asp:DropDownList>
                                    <label id="dateTimeFilterLabel" runat="server" style="padding-left: 15px" visible="false">
                                        בחירת מופע לפי תאריך</label>
                                </div>

Also tried to save the index with:

$(".dateTimeFilterIdentifierCls").change(function () {
    localStorage.setItem('ChosenDateIndexLS', $(".dateTimeFilterIdentifierCls").val());
});

non of them work. really need a solution. Thanks!

score 0 · Answer 1 · answered Apr 09 '19 at 22:37

Try it like this, worked in google chrome, I am logging out the localstorage so you can see that it saves the selection. In your example you have the on change outside of the document ready, so the on change may not fire correctly or at all

Code

<!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title></title>
    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous">
    </script>
    </head>
    <body>
      <select class="dateTimeFilterIdentifierCls" name="">
        <option value="hi"> hi </option>
        <option value="hello">hello</option>
        <option value="foo">foo</option>
        <option value="bah">bah</option>
      </select>
    </body>
    <script type="text/javascript">
    $().ready(function(){
      $('.dateTimeFilterIdentifierCls').change(function(){
        localStorage.setItem('ChosenDateIndexLS',$(".dateTimeFilterIdentifierCls").val());
        console.log(localStorage);
      });
    });
    </script>
  </html>

As long as you do not clear or overwrite localstorage, it will persist. — Chizzele, Apr 09 '19 at 22:51
If this helped you and was the correct answer, please vote :) — Chizzele, Apr 09 '19 at 23:07

saving the selected option not working with jquery

1 Answers1