Dojo Toolkit: Setting the ComboBox Default Value

From Dev411: The Code Wiki

Dojo Toolkit's ComboBox doesn't allow you to set a default value. To get around this we can set the default value using JavaScript during onLoad.

For some confirmation of this issue, the nightly tests as of 0.3.1 have code that say
value="this should never be seen - it is replaced!"

The HTML

For our example, let's use ComboBox #2 from the nightly tests (http://archive.dojotoolkit.org/nightly/tests/widget/test_ComboBox.html) but add a DOM id so we can reference it:

<input dojoType="ComboBox"
  id="mycombobox"
  value="this should never be seen - it is replaced!"
  dataUrl="comboBoxData.js" style="width: 300px;" name="foo.bar"
  onValueChanged="setVal2"
>

The JavaScript

In the JavaScript we need to create a function to be called by dojo.addOnLoad. Let's call this function init() and it will use dojo.widget.byId to get a JavaScript object reference to object created from the initial dojoType. Although some examples call init() direction in dojo.addOnLoad, for byId to work, we'll need a closure.
<script type="text/javascript"><!--

function init() {
  dojo.widget.byId('mycombobox').textInputNode.value = 'Seattle';
}

// method 1
dojo.addOnLoad( init );

// method 2
dojo.addOnLoad( function() {
  init()
} )

// won't work b/c you want to send an object
// not call a function
dojo.addOnLoad( init() );

//--></script>

All Together

Combining these and putting the JavaScript in the HEAD section of the page gives us the following:

<html>
<head>
<script type="text/javascript"><!--

function init() {
  dojo.widget.byId('mycombobox').textInputNode.value = 'Seattle';
}

dojo.addOnLoad(  init )

//--></script>
</head>
<body>

<input dojoType="ComboBox"
  id="mycombobox"
  value="this should never be seen - it is replaced!"
  dataUrl="comboBoxData.js" style="width: 300px;" name="foo.bar"
  onValueChanged="setVal2"
>

</body>
</html>