<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select id="select" data-reload-qr-code>
  <option>Java</option>
  <option>Javascript</option>
  <option>PHP</option>
  <option>Visual Basic</option>
</select>
<br>
in sessionStorage: <div id="ss" style="white-space: pre"></div>

$("#select").select2({
  placeholder: "Select a programming language",
  allowClear: true
});

let reload_qr_code_event_listener = (event) => {
  let targeted_element = event.currentTarget;
  if(sessionStorage.getItem(targeted_element.id) == targeted_element.value) {
    return;
  } else {
    sessionStorage.setItem(targeted_element.id, targeted_element.value);
  }
}

let apply_reload_qr_code_event_listeners = () => {
  $('[data-reload-qr-code]').each(function() {
    let events = ['paste', 'keyup', 'change'];
    let $element = $(this);
    events.forEach(event_type => {
      $element.off(event_type, reload_qr_code_event_listener);
      $element.on(event_type, reload_qr_code_event_listener);
    });
  });
}

apply_reload_qr_code_event_listeners();


setInterval(() => {
  ss.textContent = JSON.stringify(sessionStorage, null, 2)
}, 100);