Element: <ins-select-option>
Defines a drop-down list item.
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>
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>
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>
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>
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>
Code Snippet
<ins-select> <ins-select-option></ins-select-option> </ins-select>
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>
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>
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>
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 |
EVENT | OBJECT | DESCRIPTION |
---|---|---|
insSelectOptionClicked | label, value | Execute a script when a select option is clicked |
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.