So when we are in developing we have to populate dropdown box with javascript objects. Some times we have to write more dirty codes to do that.

I am using following Jquery function to populate dropdown box with javascript array or object.

//element=> html select element id,
//source=> javascript array
//showDefault=> show default --None-- : optional
//defIndex=> default selected index : optional
function bindCombo(element, source, showDefault, defIndex) {
var k = (typeof element == "string") ? $("#" + element)[0] : element[0];
k.options.length = 0; var r = 0, j = source.length;
if (showDefault) { k.options[0] = new Option("--None--", "-1"); r = 1; }
if (j > 0) {
if (typeof source[0] == "object") { for (var i = 0; i < j; i++) { k.options[i + r] = new Option(source[i].Value, source[i].Id); }; }
else { for (var i = 0; i < j; i++) { k.options[i + r] = new Option(source[i], source[i]); }; }
if (defIndex) $(k).val(defIndex);
}
}

So if we want to bind following array to drop downbox simply we can add html attribute as below and call the above function

<select id=”test”></select> 

<b>var arr = ["one","two"];</b>

<b>bindCombo('test',arr,false,false)</b>

Now it will be populated.

More over we can bind list of following object

 function Pair(Id, Value) {
this.Id = Id;
this.Value = Value;
   }
var arr=[];
arr.push(new Pair(1,first));
arr.push(new Pair(2,second));

bindCombo('test',arr,false,false)

Further we can provide whether to show default “–None–” or set selected index using ending two parameters in function. Just only pass true or false.