Mootools snippets

Dynamically populate a select box with options

var projectSelector = document.id('project-selector');
data.each( function(item, index) {
    var newOption = new Option(item['title'], item['id']);
    try {
        projectSelector.add(newOption, null);
    }
    catch (err) {
        projectSelector.add(newOption);
    }
});

// add 'change' event handler
projectSelector.addEvent('change', function(event){
    onNewProject(this.getSelected()[0].value);
});

// eventualy select first available option
if ( data.length > 0 ) {
    projectSelector.getChildren()[0].setProperty('selected', 'selected');
    onNewProject(projectSelector.getSelected()[0].value);
}

// the 'change' event handler
function onNewProject(projectId) {
    console.log(projectId);
}