List Box

In this example, I have shown a list box with single select. Whenever you select a item from dropdown list, It will tell you which item you selected.

Reference Page:

• http://code.google.com/googleapps/appsscript/class_listbox.html

Example Demo: Single Select LIst Box

Example Code:

function doGet() {

  var app = UiApp.createApplication();

  var panel = app.createVerticalPanel();

  var listBox = app.createListBox().setName('myList').setWidth('80px');

  listBox.addItem('Item 1');

  listBox.addItem('Item 2');

  listBox.addItem('Item 3');

  listBox.addItem('Item 4');

  //Add a handler to the ListBox when its value is changed

  var handler = app.createServerChangeHandler('showSelectedinfo');

  handler.addCallbackElement(listBox);

  listBox.addChangeHandler(handler);

  var infoLabel = app.createLabel('Select from List').setId('info');

  panel.add(listBox);

  panel.add(infoLabel);

  app.add(panel);

  return app; 

}

//This functions displays the infolabel with when ListBox value is changed

function showSelectedinfo(e){

  var app = UiApp.getActiveApplication();

  app.getElementById('info').setText('You selected :'+e.parameter.myList).setVisible(true)

    .setStyleAttribute('color','#008000');

  return app;

}

Example Demo: Multiple Select List Box

In this example, you can select multiple item by holding CTRL key.

Example Code:

In the above example, I have only modified the fourth line of the code, which is given here

var listBox = app.createListBox(true).setName('myList').setWidth('80px');