Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
159 lines (116 sloc) 3.42 KB



select() element, index );  // Selects an item using its index element, string ); // Selects an item using a string


SDB.Dropdownlist.selection.index( element ); // returns select items index
SDB.Dropdownlist.selection.text( element );  // returns selected items text
SDB.Dropdownlist.selection.value( element ); // Same as the function above


SDB.Dropdownlist.add( element, text ); // Appends a new item


SDB.Dropdownlist.remove( element, index );  // Removes an item using its index
SDB.Dropdownlist.remove( element, string ); // Removes an item using a string


SDB.Dropdownlist.empty( element ); // Empties the whole dropdownlist

onSelect eventListener

element.addEventListener("onSelect", function(e) {
  console.log( );
  console.log( e.detail );

Real world examples

Append a new item

SDB.Dropdownlist.add(, "New item");

Select an item, 2);

Remove item with a specific text, "Example string");

Get text from the selected item

var selectedString = SDB.Dropdownlist.selection.text( );

Empty and repopulate

var targetDropdown =;
var newItems = ['New item 1', 'New item 2', 'New item 3'];
SDB.Dropdownlist.empty( targetDropdown );

for ( var i=0; i < newItems.length; i++ ) {
  SDB.Dropdownlist.add( targetDropdown, newItems[i] );

Event listener fun

Example where we wait for the user to select dropdownlist item with the text Center and then check a radio button in response and stop listening for more.

var dropdown1 =;
var uncheckRadio2 = function( e ) {
  if ( e.detail.selection.text === 'Center' ) {
    SDB.Radiocheck.check( );
    dropdown.removeEventListener("onSelect", uncheckRadio2 );

dropdown.addEventListener("onSelect", uncheckRadio2);

Mirror dropdowns

Mirror the selection of dropdown1 with dropdown2

var dropdown1 =;
var dropdown2 =;
var mirrorDropdowns = function( e ) {
  var target = === dropdown1 ? dropdown2 : dropdown1; target, e.detail.selection.index );
dropdown1.addEventListener("onSelect", mirrorDropdowns);
dropdown2.addEventListener("onSelect", mirrorDropdowns);

Disable if conditions are met

Disable a specific element if item number 2 (index 1) is selected in a dropdownlist

var dropdown =;
var disableThis =;

dropdown.addEventListener("onSelect", function( e ) {
  var changeState = (e.detail.selection.index === 1) ? 'disable' : 'enable';
  SDB[ changeState ].element( disableThis );

Dropdownlist HTML structure:

The HTML might be slightly cleaned up to make it easier to to read.

<div class="dropdownlist" data-item-type="dropdownlist" data-item-id="23" data-item-parent-id="21">
  <label>Droplist text</label>
  <div class="drop-list-wrap">
    <div class="items">
      <div class="selected">Top Left</div>
      <div class="horizontal-line">-</div>
    <div class="arrow"><svg></svg></div>
You can’t perform that action at this time.