Getting the selected ID from a Dojo ComboBox
Posted by Shane O'Sullivan on 30 July, 2006
While fiddling around with the Dojo ComboBox widget today, I noticed that while it does support name-value pairs, it doesn’t provide an explicit way of getting back the “value”. For example, if you provide it with the JSON object:
[ {"Pat":1}, {"Mary":2}]
you can use the ComboBox’s getValue() function to retrieve the names “Pat” and “Mary”, but not the second value, which is generally what you really want.
So, FYI, to get the value, get a handle to the ComboBox, and retrieve it’s comboBoxSelectionValue.value attribute. For example, given a ComboBox with a widgetId of “myCombo”, use
var selectedId = dojo.widget.byId(’myCombo’).comboBoxSelectionValue.value;
Alternatively, and possibly simpler, you can set the setSelectedValue attribute on the div when you’re creating the ComboBox. For example, if I had a hidden input field that I wanted the selected id to be copied to:
<input type=”hidden” name=”userid” id=”userid”></input>
you would define the ComboBox like:
<div dojoType=”ComboBox”
setSelectedValue=”dojo.byId(’userid’).value=arguments[0]” …….(whatever other args you want)
> </div>
This results in the hidden input field being automatically populated with the selected id value. Simple enough, but it would be better if the ComboBox had a parameter where you could simply give it the id of an input node to mirror itself to.
4 October, 2006 at 12:21 pm
Thank you very much , 5* rating
4 October, 2006 at 2:01 pm
you’re very welcome, glad this helped
31 October, 2006 at 4:16 am
Awesome work, you’ve saved me potentially hours of frustration!
31 October, 2006 at 11:25 pm
Sweet. Just what i was looking for. Mucho appreciated.
1 November, 2006 at 9:49 am
Glad to help
7 December, 2006 at 4:23 pm
Thank you very much, it was very helpful.
10 January, 2007 at 8:49 am
Great idea!
Only one observation: in order for the dojo.widget.byId to work on a Combobox created from existing markup, the markup should be constructed using “” and not “” as it is presented in the manual.
10 January, 2007 at 8:52 am
If you’re entering markup into a comment, you’ll probably have to escape the angle brackets, use < for < and > for >
10 January, 2007 at 9:31 am
Yes, you are right.
What I meant was:
“<select>” and not
“<input>”.
12 February, 2007 at 9:49 pm
I’m sorry, but I prefer to have a complete sample.
Can you, please, publish a sample, or send me a sample on this to asd [_at_] 37 [_dot_] com?
Thank you,
Zenaida
13 February, 2007 at 9:13 am
Um, ok…. my working rate is €100 per hour, but just for you I’ll make it €200. Please send a cheque to
1 AreYouKiddingMe St.,
GetOffYourAss,
AndDoSomeWork,
Co. Cork,
Ireland
This is open source, which means we work for free, giving our free time for the benefit of ourselves and the community. In the open source world, there is little in the way of hand holding, you’re expected to contribute back, and to work hard. I suggest you try reading this post again, and applying it to your problem.
Then you can figure it out, and publish your own sample for others to learn from. You can even post it here as a comment. Hmm, it took me 4 mnutes to type this, that’ll be 30 bucks please….
20 February, 2007 at 5:11 pm
Very nice. Thank you!
20 February, 2007 at 5:14 pm
Rai Singh, you’re very welcome
28 March, 2007 at 5:36 am
It’s nice to see these kinds of answers on blogs. However, isn’t the Dojo Select widget meant to solve this problem? The Select widget provides the getLabel(), setLabel(), setValue(), and getValue() (inherited from ComboBox) functions. I’m surprised you didn’t mention this at all. At any rate, thanks for the article.
4 April, 2007 at 11:04 am
Super thanks. Great post just what I’ve been looking for.
16 April, 2007 at 3:12 pm
Excellent!
Thanks
19 July, 2007 at 5:01 pm
Great Post, thx!
(I had to add the dataUrl=”xxx.json” to the div… don’t know if this is obvious…
21 February, 2008 at 4:31 pm
I also really appreciate the info, dojo docs are not so great and this is exactly what I needed to know.
But this {{”Pat”:1},{”Mary”:2}} is not legal JSON. I think you mean [{"Pat":1},{"Mary":2}] or better for security {”myData”:[{"Pat":1},{"Mary":2}]}.
21 February, 2008 at 7:02 pm
Hi Ashley,
Yes, you are correct of course, that was not valid JSON. I’ve updated it.
Thanks,
Shane
14 May, 2008 at 11:51 pm
Do you know if there’s a way to retrieve Pat | Mary by using the value?
I have a value being passed in via the url (e.g. 1) and want to initialise the combobox to the appropriate value (i.e. ‘Pat’
Thanks
14 May, 2008 at 11:52 pm
P.S. I’m still on 0.4 (don’t ask…
15 May, 2008 at 8:05 am
There is a way, but it depends on the data store you are using. If you are using the dojo.widget.basicComboBoxDataProvider, it has an variable called “_data” that contains an array mapping display value to hidden value.
You can search it using something like:
var searchVal = “some string”;
var array = myCombo.dataProvider._data;
for(var i = 0; i < array.length; i++) {
if(array[i][1] == searchVal) {
myCombo.setAllValues(array[i][0], array[i][1]);
}
}
Hope this helps
Shane