Skip to content
This repository was archived by the owner on Dec 7, 2021. It is now read-only.

Dynamically Load Options

Karl edited this page Jun 17, 2017 · 12 revisions

Initialise Selectr as normal:

var selector = new Selectr("select");

You can then utilise the addOption method to load options in the container:

function fetchData() {
  var request = new XMLHttpRequest();

  request.open("GET", "https://domain.com/ajax/fetch", true);

  request.onload = function() {

    if (request.status >= 200 && request.status < 400) {
      // Parse the response JSON to and object
      var data = JSON.parse(request.responseText);

      // Pass the oject to the 'addOption' methed
      selector.addOption(data);
    }
  };

  request.send();
}

You call the function whenever required, or when Selectr has loaded:

// Listen for the init event and load the data
selector.on("selectr.init", function() {
  fetchData();
});

If you have pagination active then Selectr will load all options into it's cache, but will only insert the maximum amount required into the dropdown.