Question

I’m creating new select boxes from a javascript function, on a div click event.

when the user clicks a div, a new select box is created elsewhere on the page (along with other stuff).

Specifically, on a div click, I create a string (in a javascript function) of the form:

<select id="derp"+divName dojoType="dijit.form.Select" onChange="dosomething()">
    <option value="foo">foo</option>
    <option value="bar">bar</option>
    ...
</select>

Then I call a function to widgetize the above select:

function makeDojoWidget(digitID){
    var widget = new dijit.form.Select({},digitID); //options,elementID
}

It creates the widget just fine. When the user clicks another div, it creates another select box. However only the new select is editable. i.e. I can’t change the selected value of the other select boxes.

It works fine when I don’t try to render it as a dijit, so it seems to be a dojo problem (i.e. if I create a regular select, I can change the selected value of all selects when I make a new select).

I’m stumped… any suggestions??

Answer 1

Try to force it to be enabled.
In some words in your function

function makeDojoWidget(digitID){
var widget = new dijit.form.Select({},digitID); //options,elementID
}

Set readOnly to false.

function makeDojoWidget(digitID){
var widget = new dijit.form.Select({readOnly:false},digitID); //options,elementID
}