jQuery: Save and Restore Selection State of a Multi-Select Box

I’m not sure I understand why you are looking for this, but I got it to work.

I stored the backup in a variable and just use that to recover from. I also set your select to a variable name, that way it can be easily referenced later.

search_Params = $('select[name="advocateSearchParams.answerMap[11].answerIdList"]');

$('#deselectAll').click(function() {
  search_Params.find('option').prop('selected', false);
});

$('#backupRestore').click(function() {
  backup = [];

  search_Params.find('option:selected').each(function() {
    backup.push($(this).val());
  });

  search_Params.find('option').prop('selected', true);

  if (backup.length > 0) {
    search_Params.find('option').prop('selected', false);
    backup.forEach(function(_val) {
      search_Params.find("option[value=" + _val + "]").prop("selected", true)
    });

    console.log(backup)

  } else {
    search_Params.find('option').prop('selected', false);
    console.log('All deselected');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="advocateSearchParams.answerMap[11].answerIdList" size="10" multiple="multiple">
  <option value="103">Type1</option>
  <option value="104">Type2</option>
  <option value="105">Type3</option>
  <option value="106">Type4</option>
  <option value="107">Type5</option>
  <option value="108">Type6</option>
</select>

<button id="backupRestore">
Backup/Restore
</button>
<button id="deselectAll">
Deselect All
</button>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top