Select Option

<ins-select label="Operating System">
  <ins-select-option label="Windows" value="Windows" default></ins-select-option>
  <ins-select-option label="macOS" value="macOS"></ins-select-option>
  <ins-select-option label="Linux" value="Linux"></ins-select-option>
</ins-select>

<ins-select label="Operating System" searchable>
  <ins-select-option label="Windows" value="Windows" default></ins-select-option>
  <ins-select-option label="Linux" value="Linux"></ins-select-option>
  <ins-select-option label="macOS" value="macOS"></ins-select-option>
</ins-select>

<ins-select label="Operating System" multiple>
  <ins-select-option label="Windows" value="Windows" default></ins-select-option>
  <ins-select-option label="Linux" value="Linux"></ins-select-option>
  <ins-select-option label="macOS" value="macOS"></ins-select-option>
</ins-select>

<ins-select label="Operating System" searchable button>
  <ins-select-option label="Windows" value="Windows" default></ins-select-option>
  <ins-select-option label="Linux" value="Linux"></ins-select-option>
  <ins-select-option label="macOS" value="macOS"></ins-select-option>
</ins-select>

<ins-select label="Operating System" small button>
  <ins-select-option label="Windows" value="Windows" default></ins-select-option>
  <ins-select-option label="Linux" value="Linux"></ins-select-option>
  <ins-select-option label="macOS" value="macOS"></ins-select-option>
</ins-select>

<ins-select>
  <ins-select-option></ins-select-option>
</ins-select>

<ins-select id="directSetDataSelect"></ins-select>

<script>
  var insSelectOptionEl = document.createElement("ins-select-option");

  function setInsSelectOptions(id, options) {
    var insSelectEl = document.getElementById(id);
    var newInsSelectEl = document.createElement('ins-select');
    var insSelectElParent = insSelectEl.parentElement;

    options.forEach(function (option, index) {
      // generate ins-select-option tags
      var insSelectOptionEl = document.createElement("ins-select-option");

      // generate ins-select-option tags
      var insSelectOptionEl = document.createElement("ins-select-option");
      insSelectOptionEl.label = option.label;
      insSelectOptionEl.value = option.value;

      // Add the newly generated ins-select-option element to the new ins-select element
      newInsSelectEl.appendChild(insSelectOptionEl);
    });

    // Set the id of the new ins-select element to the old ins-select's id name
    newInsSelectEl.setAttribute('id', id);

    // Remove the old ins-select element
    insSelectElParent.removeChild(insSelectEl);

    // Add the new ins-select element
    insSelectElParent.appendChild(newInsSelectEl);
  }

  function successHandler(response) {
    var options = JSON.parse(response);
    setInsSelectOptions('directSetDataSelect', options);
  }

  function errorHandler(error) {
    console.log(error);
  }

  var xmlhttp = new XMLHttpRequest();
  // Javascript ajax call
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
      if (xmlhttp.status == 200) {
        successHandler(JSON.parse(this.responseText));
      } else if (xmlhttp.status == 400) {
        errorHandler();
      } else console.log('something else other than 200 was returned');
    }
  };

  xmlhttp.open("GET", "https://gngyishvwl.execute-api.ap-southeast-2.amazonaws.com/insitesDummyStage/insites-dummy-api", true);
  xmlhttp.send();
</script>

<ins-select>
  <ins-select-option label="Android" value="Android" default></ins-select-option>
  <ins-select-option label="iOS" value="iOS"></ins-select-option>
  <ins-select-option label="Windows" value="Windows"></ins-select-option>
</ins-select>

<ins-select label="Operating System">
  <ins-select-option id="select-option" label="macOS" value="macOS"></ins-select-option>
  <ins-select-option id="select-option" label="Linux" value="Linux"></ins-select-option>
</ins-select>
<script>
  var sel = document.querySelectorAll('ins-select-option[id="select-option"]');
  for (var i = 0; i < sel.length; i++){
    sel[i].addEventListener('insSelectOptionClicked', function(event){
      console.log(event.detail.value);
      alert(event.detail.label);
    });
  };
</script>