mark multiple options as selected on page load

Question

I have this multi-select

$('#hide_col').change(function() {
  var arr = $(this).val();
  localStorage.setItem('hide', arr);
  var hide_cols = localStorage.getItem('hide');
  var hide;

  for (hide = 0; hide <= 28; hide++) {
    if (hide_cols.includes('row' + hide)) {
      $('.row' + hide).hide();
    } else {
      $('.row' + hide).show();
    }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" style="direction: rtl; margin-top: 5px;width: 600px;">
  <select name="hide" data-live-search="true" id="hide_col" class="selectpicker w-25 check_info js-example-basic-multiple" multiple data-style="btn-info">
    <option value="row1">סטטוס/יום</option>
    <option value="row2">תאריך</option>
    <option value="row3">שידור/ משחק</option>
    <option value="row4">ליגה/סוג שידור</option>
    <option value="row5">שידור</option>
    <option value="row6">ערוץ</option>
    <option value="row7">הערות אישיות</option>
    <option value="row8">מיקום</option>
    <option value="row9">חדר</option>
    <option value="row10">שדר/פרשן</option>
    <option value="row11">קווים/פאנל</option>
    <option value="row12">עורך</option>
    <option value="row13">במאי/עוזר במאי</option>
    <option value="row14">מפיק</option>
    <option value="row15">טכנאי</option>
    <option value="row16">בקליינר/עוזר צלם</option>
    <option value="row17">מספר מצלמות/צלמים </option>
    <option value="row18">מפקח קול</option>
    <option value="row19">REPLAY</option>
    <option value="row20">CG</option>
    <option value="row21">רשם</option>
    <option value="row22">מפיק אופטיוב/טכנאי אופטיוב</option>
    <option value="row23">מאפרת/מלבישה</option>
    <option value="row24">שיבוץ ציוד</option>
    <option value="row25">רכבים/נגררים</option>
    <option value="row26">קופה</option>
    <option value="row27">כרטיס</option>
    <option value="row28">שלח הודעה/מחק שידור</option>
  </select>

</div>

how can I trigger the function to select the values from the array after the page is reloading and trigger the hide action as well? the array is stored in the local store if I use the $('#hide_col').val('.row'+hide); inside the function, after the page is loading I get only the last result in the array selected and the hide action is not triggerd

Does this answer your question? [Javascript/jQuery: Set Values (Selection) in a multiple Select](https://stackoverflow.com/questions/16582901/javascript-jquery-set-values-selection-in-a-multiple-select) — Heretic Monkey, Jan 19 '20 at 23:27

Mohamed Farouk · Answer 1 · 2020-01-19T23:19:13.933

Example cannot run here.. but it should work. The key change is $('select[name*="hide"] > option[value="row'+hide+'"]').hide();

$( document ).ready(function() {
   var arrStr = localStorage.getItem('hide');
   hideSelected(arrStr.split(','))
});

$('#hide_col').change(function() {
  var arr = $(this).val();
  localStorage.setItem('hide', arr);
  hideSelected(arr);
});

function hideSelected(arr){
 var hide;
  for (hide = 0; hide <= 28; hide++) {
    if (arr.includes('row' + hide)) {
      $('select[name*="hide"] > option[value="row'+hide+'"]').hide();
    } else {
            $('select[name*="hide"] > option[value="row'+hide+'"]').show();
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" style="direction: rtl; margin-top: 5px;width: 600px;">
  <select name="hide" data-live-search="true" id="hide_col" style='height:400px' class="selectpicker w-25 check_info js-example-basic-multiple" multiple data-style="btn-info">
    <option value="row1">סטטוס/יום</option>
    <option value="row2">תאריך</option>
    <option value="row3">שידור/ משחק</option>
    <option value="row4">ליגה/סוג שידור</option>
    <option value="row5">שידור</option>
    <option value="row6">ערוץ</option>
    <option value="row7">הערות אישיות</option>
    <option value="row8">מיקום</option>
    <option value="row9">חדר</option>
    <option value="row10">שדר/פרשן</option>
    <option value="row11">קווים/פאנל</option>
    <option value="row12">עורך</option>
    <option value="row13">במאי/עוזר במאי</option>
    <option value="row14">מפיק</option>
    <option value="row15">טכנאי</option>
    <option value="row16">בקליינר/עוזר צלם</option>
    <option value="row17">מספר מצלמות/צלמים </option>
    <option value="row18">מפקח קול</option>
    <option value="row19">REPLAY</option>
    <option value="row20">CG</option>
    <option value="row21">רשם</option>
    <option value="row22">מפיק אופטיוב/טכנאי אופטיוב</option>
    <option value="row23">מאפרת/מלבישה</option>
    <option value="row24">שיבוץ ציוד</option>
    <option value="row25">רכבים/נגררים</option>
    <option value="row26">קופה</option>
    <option value="row27">כרטיס</option>
    <option value="row28">שלח הודעה/מחק שידור</option>
  </select>

</div>

mark multiple options as selected on page load

1 Answers1