Your browser does not support JavaScript!
Upvotes Anonymous 14 User 1

STComboBox: A Lightweight jQuery Combo Box

I've completely rewritten DDComboBox. The result is a lightweight (~5kb minified) combo box that is easy to use, modify, and style.
You can see the combo box in action here.
Basic Usage
Create a container for the combo box (and a label if you want):
<label for="collegesCombo-ddi">Colleges</label>
<span id="collegesCombo"></span>
and then initialize the combo box using some JavaScript:
$(document).ready(function() {
    var combo = new STComboBox();
    combo.Init('collegesCombo');         //ID of a <span> or <div>
    var data = [];

    var colleges = [
        "A T Still University of Health Sciences",
        "Abilene Christian University",
        "Abraham Baldwin Agricultural College"    

    for(var i=0; i < colleges.length; i++) {
        data.push({id: i, text: colleges[i]});
Inside the <span>, an <input> field will be created, with the ID of collegesCombo-ddi (drop-down input).
Get the Value
To retrieve the value, you can use jQuery to select the <input> element's value:
var value = $('#collegesCombo-ddi').val();
This is because when the input box is created in the JavaScript code, it's given an ID using the container ID you specified, followed by -ddi.

You can also call a method on the combo object:
var value = combo.getInput().val();
Clear the Value
To clear the combo box, just set the input value to an empty string:
STComboBox is distributed under the MIT license.
Browser Support
I'm still testing this in different browsers, but have seen success so far with IE8, IE11, Firefox 35, and Chrome 39.
I'd love to hear your feedback. Feel free to comment below (anonymously if you like) or hit me up on twitter @Jasonprogrammer.
Was this helpful?


Byanonymous Anonymous 0 User 1
Hi Jason,I think your combo box looks good, I've been looking for something like this.Does your control support events?I would like to create a cascading combobox: one combobox would provide a filter for the next combobox. A common scenario, but not always easy. For it to work, i need to be able to trigger an event whenever the value on the first combo gets set (be that by typing an exact match and tabbing of the first combo or be selecting an item in the first combo with the mouse or by pressing enter).Best Regards,Peter
Byjasonj Anonymous 1 User 0
Yes, this is possible. I'll see if I can get some sample code for this.
Byjasonj Anonymous 0 User 0
I just updated the code to help support two events. The events could be implemented as follows, while initializing the combo box:
var combo = new STComboBox();

combo.onBlur = function(evt, value) {
    //the value is a string with the combo box value
    //this handler is called when focus is lost from the <input> box

combo.onSelect = function(evt, value) {
    //the value is a string containing the selected value
    //this handler is called when the <enter> key is pressed to
    //select a combo box value, or a combo box row is clicked
I added the code to call these handlers, but haven't yet tested it by putting together an example.

Does this help?
Byanonymous Anonymous 0 User 1
Hi Jason,

I was very happy to stumble upon this code.  I have a question, though.  Do I  have to pass an element ID when initializing or can I pass a class?  I plan to have 30 or more drop downs on a page that have the same selections.

Thanks for your help,

Jason N.
Byanonymous Anonymous 0 User 0
The dropdown initialization only takes an ID. Could you do something like this?
$('.yourclass').each(function() {
    var id = $(this).attr('id');
    //initialize the dropdown using the ID
Byanonymous Anonymous 0 User 0
Thanks for the reply.

I will probably end up having to do something like that.  The drop downs will be created on the fly, the user having the ability to add more rows that contain the drop downs, which means I'll have to keep track of how many there are on the page.

Do you think there will be any performance/memory issues of having that many instances of STComboBox? (I'm a intermediate-beginner with JS, so forgive me if that's a dumb question).
Byanonymous Anonymous 0 User 0
Oh, that's not a dumb question. I don't think there'd be memory or performance issues as long as the drop downs don't contain too many options. How many options are you thinking? Hundreds/thousands? Will each drop-down contain the same elements?

Byanonymous Anonymous 0 User 0
Jason, thanks again for your reply.

Actually, the drop downs wouldn't be too large.  Maybe 15 to 20 items max.  There will be, I would say, 5-8 different types (sets of options) duplicated 30 or so times.  Just so you have some context, the web app displays rows of information, with some of the information editable by dropdown menus.  The user will be able to add rows as they need and add options to the dropdowns as they need.

Sounds like STComboBox will be a good fit.  I appreciate the work you put into it and answering my questions.
Byanonymous Anonymous 0 User 0
Yeah, I'm happy to help! Thanks for the good feedback, and for being patient with this commenting system (I'm still working on it, it's showing my replies as anonymous, and not ordering the replies correctly...).

I'm guessing you should be fine on performance, since you're anticipating hundreds (30 combo boxes*15=450) as opposed to thousands of items. The combo box example has 3k items in it, and it performs OK (it's a bit slower on mobile, but still usable I think).

Byanonymous Anonymous 0 User 0
I’m new to Java – how can i retrieve selected value from combo and pass it back to PHP server? Could you please show simple example?
Byanonymous Anonymous 0 User 0
how can we clear the combobox?
Byjasonj Anonymous 0 User 0
Sorry for the delay. I've updated the documentation above to show how to clear the combobox.

Leave a Comment

I agree to the Terms of Service
Design © 2015, Downranked, LLC.,
Original user code contributions under MIT License