September 7, 2005

Editable combo box based on a selected index

I'm currrently working on a simple application that includes a combo box list of choices. One of the options is "other" which would then allow the user to input their own.

At first I thought if the "other" option was selected, then have an additional text field added dynamically and allow the user to enter their custom choice there.

I retracted that idea in favor of having the user to be able to add their option on the fly in the dropdown.

Here is the code below in order to get this to function the way I needed it to:

Create a combo box on the stage and name it "my_cb".
my_cb.addItem({label:"Option 1"});
my_cb.addItem({label:"Option 2"});
my_cb.addItem({label:"Option 3"});
my_cb.addItem({label:"Option 4"});
my_cb.addItem({label:"Option 5"});
my_cb.addItem({label:"Option 6"});
my_cb.addItem({label:"Other (click here to type your own)"});

var aObj:Object = new Object();
aObj.close = function(evt:Object) {
var selIndex:Number = evt.target.selectedIndex;
selIndex == 6 ? evt.target.editable=true : evt.target.editable=false;
};

my_cb.addEventListener("close", aObj);
Now when I process my form options, I couldn't use the standard "my_cb.getSelectedItem" method to retrieve the value. So use of the (hidden) "getValue()" method does the trick.
my_cb.getValue();

Hope that helps anyone else looking to achieve this functionality as well!

-DesDev

2 comments:

Demian said...

I just came accross your post via Pixelfumes and I had to drop everything and give it a try.

Nice job, thanks for the post!

Anonymous said...

Simple and clean.
Cheers!