how do dynamically create new option of drop down box using dojo

Question

JavaScript code:

var ref =dojo.byId("xyz");
var optn = document.createElement("OPTION");
optn.text="txt"
optn.value="val"
ref.options.add(optn);

I want dojo equivalent of above code

Solution 1

i think that would be:

var ref = dojobyId("xyz");
dojo.create("option", { value: "some", innerHTML: "label of option"}, ref);

just read the documentation about the dom functions of dojo, it's simple enough.

Good luck!

Solution 2

dijit.byId('mySelect').addOption({ label: 'text' , value: 'val' });

Worked for me in Dojo 1.6

Solution 3

You are already using Dojo (dojo.byId).

Dojo does not replace JavaScript (it augments it). When things are already clear or concise in JavaScript, it doesn't try to provide an alternative to the normal JavaScript way of doing it.

In your example, you may try:

dojo.create("option", { text:"txt", value:"val" }, dojo.byId("xyz"));

This creates the <option> tag directly inside the <select> element (which I assume is "xyz"). However, some browsers don't seem to like adding <option> tags directly like this instead of adding it to the options property. If so, you can use the add function of the <select> tag itself:

dojo.byId("xyz").add(dojo.create("option", { text:"txt", value:"val" }));

Notice that other than the call to dojo.create that simpifies creating elements, everything related to adding an option to a <select> is standard JavaScript.

Solution 4

As innerHTML doesn't work in IE, I did as follows, it worked:

    option = document.createElement('option');
    option.text = 'xyz';
    option.value = 'val';
    dojo.byId('commodities').add(option);

View more solutions