How to select dropdown (append option) in google closure?

Question

I have question about Google Closure.

I'm using lib :

• goog.base.js
• goog.dom.js
• goog.events.Event
• goog.events.EventTarget
• goog.ui.MenuItem
• goog.ui.Select

I want append option in my dropdown on jQuery i could just do

var selectData = { "1": "test 1", "2": "test 2" };
var auxArr = [];
$.each(selectData, function(i, option) {
    vauxArr[i] = "<option value='" + i + "'>" + option + "</option>";
});
$('#My selector').append(auxArr.join(''));

So how to do the same in google closure?

Answer 1

There are two ways to create a dropdown in Closure. You can either have an HTML object on your page and then decorate it, or create one in Javascript and then render it on the page.

It seems like you would want to use the render approach:

<label id="mySelect">This is my dropdown:</label>
<script>
  var mySelect = new goog.ui.Select();
  mySelect.addItem(new goog.ui.MenuItem('test 1'));
  mySelect.addItem(new goog.ui.MenuItem('test 2'));
  mySelect.render(goog.dom.getElement('mySelect'));
</script>

See: http://google.github.io/closure-library/source/closure/goog/demos/select.html