Insites Docs Web Components V1Data EntrySelect Option

Select Option

Last updated on August 02, 2024.

Element: <ins-select-option>

Defines a drop-down list item.

Complete Example

Code Snippet

<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>
Searchable Dropdown

Code Snippet

<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>
Multiselect Dropdown

Code Snippet

<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>
Dropdown Button with Search Bar

Code Snippet

<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>
Small Dropdown Button

Code Snippet

<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>
Default State

Code Snippet

<ins-select>
  <ins-select-option></ins-select-option>
</ins-select>
Direct Set Data

Code Snippet

<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>
Static Data Source

Code Snippet

<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>
Events - insSelectOptionClicked

Code Snippet

<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>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "Option" any Defines label of option
value string "" any Defines value of option
disabled boolean false true, false Disables option dropdown
default boolean false true, false Makes specific option default value of dropdown

 

Events

 

EVENT OBJECT DESCRIPTION
insSelectOptionClicked label, value Execute a script when a select option is clicked

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.