Selecting options in selectPicker for sessionStorage

Question

So I created a mock up of my problem. I am using Select Picker to create my multi-select drop-down. On page reload I want to save the options selected via sessionStorage.

My session Storage works successfully. It grabs the value of my options and stores them on my browser, however it won't be displayed visually to the user.

Is there a way to select the options in the drop-down menu using Javascript/jquery?

Also worth mentioning my logic might seem overkill, but I am using $(this) to grab each name attribute because I will be using this on multiple forms.

Thanks!

jsfiddle : https://jsfiddle.net/7Lhwbzs2/3/

<!--Importing CSS stylesheets-->
<link rel="stylesheet" type="text/css"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>

<!--Importing Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
            
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<div>
  <select class="selectpicker" name="Food" data-none-selected-text="Select Option(s)..." multiple>
       <option value="Pizza">Pizza</option>
       <option value="Wings">Wings</option>
       <option value="Veggies">Veggies</option>
       <option value="Rice">Rice</option>
       <option value="Pasta">Pasta</option>
  </select>
</div>

<script>
    $('select').selectpicker({
    actionsBox: true,
  });
  $('select').each(function( index ) {
    var previousSelection = window.sessionStorage.getItem(`${$(this).attr('name')}`) ? JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
    console.log(previousSelection)
  });

  $('select').on("change", function (e){
    window.sessionStorage.setItem(`${$(this).attr('name')}`, JSON.stringify($(this).val()) );
  });
</script>

https://stackoverflow.com/questions/36944647/bootstrap-select-on-click-get-clicked-value https://stackoverflow.com/questions/62850484/bootstrap-select-add-actions-based-on-selected-options-using-jquery https://stackoverflow.com/questions/53706399/get-values-of-bootstrap-select-options-using-jquery — react_or_angluar, Nov 12 '20 at 01:00

score 4 · Accepted Answer · answered Nov 12 '20 at 01:01

4

You can just use selectpicker like this:

$('.selectpicker').selectpicker('val', previousSelection);

Just replace your javaScript code with this. I tested it and it works just fine:

var previousSelection
 $('select').selectpicker({
    actionsBox: true,
  });
  $('select').each(function( index ) {
    previousSelection = 
   window.sessionStorage.getItem(`${$(this).attr('name')}`) ? 
    JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
    console.log(previousSelection)
  });

  $('select').on("change", function (e){
    window.sessionStorage.setItem(`${$(this).attr('name')}`, 
   JSON.stringify($(this).val()) );
  });

  $('.selectpicker').selectpicker('val', previousSelection);

answered Nov 12 '20 at 01:01

HenryDev

4,685
5
27
64

1

Put this line of code under my getItem call and worked perfectly! Thank you – anon Nov 12 '20 at 01:09
So if I wanted this to work for multiple forms do you know what would be the best approach? I applied two forms and seems like one is dependent of the other https://jsfiddle.net/jp2149tc/8/. – anon Nov 12 '20 at 01:24
2

@anon in that case you can use a selector for each dropdown. For example for the first one you will use: $('.selectpicker[name=Food1]').selectpicker('val', previousSelection1); and for the second one you'll use $('.selectpicker[name=Food2]').selectpicker('val', previousSelection2); Make use to create 2 arrays for each dropdown. Hope that helps :) – HenryDev Nov 12 '20 at 01:45

Selecting options in selectPicker for sessionStorage

1 Answers1