Select Option

<ins-input-select 
  label="Operating System"
  tooltip="This is a sample tooltip content. It also support html content.">

  <ins-input-select-option 
    label="Windows" 
    value="Windows" 
    Default>
  </ins-input-select-option>

  <ins-input-select-option 
    label="macOS" 
    value="macOS">
  </ins-input-select-option>

  <ins-input-select-option 
    label="Linux" 
    value="Linux">
   </ins-input-select-option>

</ins-input-select>

<ins-input-select 
  label="Operating System" 
  searchable>

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

  <ins-input-select-option label="Linux" value="Linux">
  </ins-input-select-option>

  <ins-input-select-option label="macOS" value="macOS">
  </ins-input-select-option>
</ins-input-select>

<ins-input-select 
  id="selectMultipleEl"
  label="Operating System" 
  multiple searchable
  placeholder="Please select an operating system"
  search-placeholder="Search an operating system">

  <ins-input-select-option 
    label="Windows" 
    value="Windows">
  </ins-input-select-option>

  <ins-input-select-option 
    label="Linux" 
    value="Linux">
  </ins-input-select-option>

  <ins-input-select-option 
    label="macOS" 
    value="macOS">
  </ins-input-select-option>

  <ins-input-select-option 
    label="Android" 
    value="Android">
  </ins-input-select-option>
  
  <ins-input-select-option 
    label="iOS" 
    value="IOS">
  </ins-input-select-option>
  
  <ins-input-select-option 
    label="ChromeOS" 
    value="ChromeOS">
  </ins-input-select-option>
  
</ins-input-select>

<script type="text/javascript">
  setTimeout(() => {
    var selectMultipleEl = document.getElementById('selectMultipleEl');

    selectMultipleEl.setValue(["Windows"]);
  }, 500);
</script>

<ins-button-select 
  label="Operating System" 
  value="Windows"
  searchable>

  <ins-button-select-option 
    label="Windows" 
    value="Windows">
  </ins-button-select-option>

  <ins-button-select-option 
    label="Linux" 
    value="Linux">
  </ins-button-select-option>

  <ins-button-select-option 
    label="macOS" 
    Value="macOS">
  </ins-button-select-option>

</ins-button-select>

<ins-button-select 
  label="Operating System" 
  value="Windows">

  <ins-button-select-option 
    label="Windows" 
    value="Windows">
  </ins-button-select-option>

  <ins-button-select-option 
    label="Linux" 
    value="Linux">
  </ins-button-select-option>

  <ins-button-select-option 
    label="macOS" 
    Value="macOS">
  </ins-button-select-option>

</ins-button-select>

<ins-input-select>

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

</ins-input-select>

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

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

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

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

    // generate ins-select-option tags
    var insSelectOptionEl = document.createElement("ins-input-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-input-select value="Android">

  <ins-input-select-option 
    label="Android" 
    value="Android">
  </ins-input-select-option>

  <ins-input-select-option 
    label="iOS" 
    value="iOS">
  </ins-input-select-option>

  <ins-input-select-option 
    label="Windows" 
    value="Windows">
  </ins-input-select-option>

</ins-input-select>

<ins-input-select 
  label="Operating System">

  <ins-input-select-option 
    id="select-option" 
    label="macOS" 
    value="macOS">
  </ins-input-select-option>

  <ins-input-select-option 
    id="select-option" 
    label="Linux" 
    value="Linux">
  </ins-input-select-option>

</ins-input-select>

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