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

问题

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

回答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!

回答2:

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.

回答3:

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);

回答4:

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

Worked for me in Dojo 1.6

回答5:

Two options:

Option 1:

dojo.require("dijit.form.Select");
var ref = dojo.byId("xyz");
dojo.create("option", { 
    value: "val", 
    innerHTML: 
    "label of option"
    }, ref);

Option 2:

dojo.require("dijit.form.Select");

dojo.ready(function() {
    new dijit.form.Select({
        name: 'myName',
        options: [{{
            label: 'xyz',
            value: 'val',
            selected: true
         }]
    }).placeAt(dojo.byId("xyz"));
 });

来源：https://stackoverflow.com/questions/5350525/how-do-dynamically-create-new-option-of-drop-down-box-using-dojo

标签

javascript

dojo