# inputEx - DSSelectField Usage

## Using a DataSource

How to populate the selectField using a YUI datasource (from local data, XHR, JSONP, function, ...):

var myDataSource = new YAHOO.util.XHRDataSource("books.json"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { fields: ["id","quantity","amount","title", "category"], resultsList: "Results" }; new inputEx.DSSelectField({name: 'country', datasource: myDataSource, valueKey: "id", labelKey: "title", parentEl: 'container1'});

## Updated event

How to listen to the updated event :

var myDataSource = new YAHOO.util.XHRDataSource("books.json"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { fields: ["id","quantity","amount","title", "category"], resultsList: "Results" }; var el = YAHOO.util.Dom.get('container2'); var field2 = new inputEx.DSSelectField({name: 'country', datasource: myDataSource, valueKey: "id", labelKey: "title", parentEl: el}); var logDiv = inputEx.cn('div', null, null, "Log :"); el.appendChild(logDiv); field2.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); });

## Set Value

How to set the value :

var myDataSource = new YAHOO.util.XHRDataSource("books.json"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { fields: ["id","quantity","amount","title", "category"], resultsList: "Results" }; var el = YAHOO.util.Dom.get('container3'); var field3 = new inputEx.DSSelectField({name: 'country', datasource: myDataSource, valueKey: "id", labelKey: "title", parentEl: el}); var setValueButton = inputEx.cn('button', null, null, "setValue to po-1482"); el.appendChild(setValueButton); YAHOO.util.Event.addListener(setValueButton, 'click', function(e,params) { field3.setValue("po-1482"); });