Append option to select with jquery

For me, standard HTML Select element is pretty much annoying.

It can't be styled properly in Internet Explorer. And it can't contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that easily, believe it or not. View demo Download source code. There is an update at the end of this tutorial and the second demo that shows the results of this updated code. Let me explain HTML structure that will be used here.

jQuery Sample - Free Source Code, Examples, Tutorials, and Demos for jQuery, AJAX, and jQuery UI

In this example we will use a short list of 8 countries. List is created using Definition List DL element. DT term and DD definition. This makes it perfect candidate for Drop Down element. Element DT can be used to show collapsed state with currently selected option while DD can show all the available options in nested UL. Here is the sample structure:. In order to make Drop Down functional we have to add several important CSS styles. First of all we have to reset margins and paddings for DD, DT and UL.

DD will be positioned relatively, so that nested UL can be absolutely positioned. As I mentioned earlier, in collapsed state, only DT will be visible. It contains link with span inside it and two elements make sliding doorsa technique that is often used for creating buttons and tabs. Styling UL is simple, it will be positioned 2px below DT and initially hidden. After adding some colors, borders and hover effects check out source code on demo pagethe result so far will be something that really looks like Drop Down.

It's time to involve jQuery. Each click on DT actually link inside DT will toggle nested UL. This was the simplest part. Now let's simulate other features of Select element. When you choose an option from the list UL it become selected option and is shown inside the link in DT. The function below replaces the HTML of currently selected item with the inner HTML of clicked link.

At the end, it hides nested UL. This looks more like Drop Down, but there are still some things that need to be done. First, once you reveal nested UL by clicking on Drop Down it remains visible.

And that's a bug. Although there can be better solutions, I've came up with this one:. The function above checks each click on a page and if click occurred on some elements outside the dropdown it hides nested UL. Now this looks like regular Select element. Although it looks fine it will surely become a headache for developers. Select element has "value" attribute where you can store some data then needs to be sent to the server.

This attribute is usually populated by ID's of records stored in the database. In our example with list of countries, it is more likely that some country ID will be needed for any serious processing on the server. So how to store these values and how to get selected one? It would be strange to have codes next to country names in the list, so let's hide these spans.

And that is the only change we'll need to make in order to make this Drop Down fully functional. Take one more look at click handler for links in UL — it replaces inner HTML of link in DT with inner HTML of clicked link.

It's easy now to get selected value from our Drop Down. You can create a function like the one below to extract selected value. As the matter of fact, the very same function extracts selected value in the demo and shows this value under the Drop Down.

The code works in all major browsers: Firefox, Safari, Google Chrome, Opera 9. It works even in IE6, althoug it needs some polishing: Since many of you pointed out the issue with accessiblity and I agree with that I made another example that creates DropDown dynamically from SELECT element and binds click event to it. Let me briefly explain the code here you can check the entire source code in the second demo. Next, it creates DL and DT with selected item inside it.

In order to fully bind this DropDown to SELECT element we need to refresh SELECT each time new selection is made in DropDown. We have to modify click event handler for links in UL. I think that reinvention of Drop Down wasn't that hard, although it might seems as is it.

There are several features that need to be implemented in order to have a credible simulation, but each one of those is simple and straightforward.

Have you ever had a need for reinventing Drop Down? What are your experiences? In any case, let me know your thoughts! Also, it would be nice if you could just use a regular dropdown and then replace it with your funky version if the user is running javascript.

Populate a select dropdown list using jQuery and Ajax | Joe Stevens' Blog

Yes, this has its price, so regular dropdown "behind the scenes" can be a solution. What I also missed to mention is: Dropdowns are in "collapsed" state by default, I doubt it will make sense to have it revealed by default. I will try to build an asp. These are the little things that I try to improve in my designs.

I never even thought about putting images and other elements in my drop-downs. Wow another cool drop down menu! Thanks for the detail tutorial! Append option to select with jquery what is the min version of browser support?

I think with a few minor CSS adjustments you could fix the IE6 issues as well. Seems to function but the layout of the visual drop down is off. Thanks for posting the tutorials — keep them how do ethiopians make their money. Then since you are forex currency trade alerts season 10 using a real select element the selected data does not get posted.

I was wondering how would you integrate this with the code behind, so we can manipulate the value on C or VB. I think this article http: Sure, styling standard elements can really be a pain, that why you might consider "reinventing". I think the most impressive detail in this is that the whole code is only some lines and it works as a charm.

My issue triple screen forex trading it is accessibility, and others have hinted at this. Nor would the hidden field work without JS to assign the value from the drop down. One solution that has been discussed is building the foundation using a select, then using jQuery to replace it with the newfangled drop down.

Other than that I do love the innovative spirit behind this drop down, especially with pyramid forex trading limited user interface options we have as web developers. As a few have stated, keyboard navigation would be a major plus. Not sure if this is possible. I would suggest a small improvement: It seems you have zipped up the wrong folder: The only my computer doesnt have hibernate option why I added span is that I can easily replace the HTML of DT link without accessing any other elements.

Demo is also updated. For adding keyEvents you could do something like this: In my example it requires the select tag to be inside the dl tag. It can easily be rewritten to suite the above example. I saw indian stock market sensex nifty stock rates it highlights on focus, but what i really thought was highlight the options when it get focus by the Keyboard.

Trigger de same effect of hover. If you mean to expand the options on focus I think that would be the strange behavior. I have developed the code for keyup and down some more. If dropdown is open i navigates up and down the main reasons for the stock market crash. Hi Janko, thanks for the great tutorial, the drop down looks fantastic, thanks for sharing it with us.

Can somebody please see if this problem can be duplicated. It does it on IE7 PC and FireFox Mac. The easiest way although there might be better ones is third quarter stock market performance add "return: Looks pretty awesome although it would be great if you could also use the keyboard to navigate through the list.

But very well written! Accessible version is always better; start with something that works for everyone and enhance it with JS. Another example using jQuery can be found: Check out this link on StackOverflow: I london summit forex magnates to binary options lessons this on a page with multiple dropdowns and with the current config, it was only working with one per page.

Thanks for the idea, the styling, and the tutorial! The only other change I made is that each DL list needs to have a unique ID obviously. So, "sample1", "sample2", etc would work fine. This is excellent, awesome enough — thanks a lot for your effort on this and sharing with us….

First off, excellent tutorial! After applying the code, I am having one slight issue though. Is there any specific way to only open the one that is clicked on?

Any help would be much appreciated! I needed this working for multiple dropdowns on a page, and I also wanted some nice effects with it. I also needed to accomplish hiding the drop down when somewhere else on the page was clicked or when an item was clicked…. Is there any way round this? Sure I could write the transformed structure by hand, but that feels ugly. I worked around my problem by putting an alternative copy of the contents into the label attribute, and pulling those out on conversion:.

But can anybody tell me what is my mistakes? I just wanna create few drop downs on one page — immediately after selects. Home Work Blog Speaking Library Bio Contact.

View demo Download source code There is an update at the end of this tutorial and the second demo that shows the results of this updated code. Simple structure Let me explain HTML structure that will be used here.

Here is the sample structure: Let's make it work It's time to involve jQuery. Although there can be better solutions, I've came up with this one: What about selected value? Instead of having hard-coded DL, we will have SELECT element with all the items here: Thanks everyone for pointing out this.

appending options to a select element with an array - jQuery Forum

View SECOND demo Wasn't that simple? Let's discuss this on twitter. Before you leave 01 Follow me on twitter 02 Subscribe to RSS I know, right? It would be better to have tab focus and key navigation tommy July 28, Hello Janko, thanks for this great article. I really really appreciate your work on this issue. Patternhead July 28, Great tut.

I like the idea but it does have some accessibility issues. Marc July 28, Nice tutorial. I will think about it in next version, for sure: Brian July 28, These are the little things that I try to improve in my designs. Brettgil July 28, Nice job. Sergejus July 28, I woud definitely add sliding effect for this: Jeff L July 28, You really need some: HeySatan July 28, Great looking manipulation.

Lineker July 28, Hey Janko, good job! Janko July 28, Brettgil: Good idea, some fast sliding would make it more attractive. Yep, I realized that after posting the tutorial: This would resolve most of the issues. HeySatan, Thanks for the link! Janko July 29, Justion: The plugin seems to be good one, although it needs modifications for styling. You should keep this as a light, easy-to-understand version. Mohammad Ashour July 29, Cool innovative idea. Valamas July 29, The box feels great.

Janko July 29, Mohammad: My 2 cents ; Bradvin July 29, hey — cool implementation — one problem — in your source download, there are no files related to the demo. Andrew July 29, Does not work in Firefox 3. Strange, what bug occurs in FF3. FULANO July 29, Very cool, but when navegate by keyboard, should highlight the selection. Janko July 29, FULANO: It highlights the selection in demo if you use FF: DevNet July 29, Nice mate ,im going to try and edit it and give a fade in effect Ethan July 29, Great tutorial!

It looks a lot like the one at NETTUTS. Mark Aarhus July 30, For adding keyEvents you could do something like this: Janko July 30, Mark: Thanks for the tip!! Soh Tanaka July 30, I like your approach Janko: Janko July 30, Soh Tanaka: Thanks for letting me know! Yep, it should work. Bill July 30, Awesome job! So drop downs toward the bottom are a little challenging.

Codie July 31, Hey, this is pretty cool, thanks for the tutorial. Mark Aarhus July 31, I have developed the code for keyup and down some more. The code is from the dropdown styling I have developed for my own project, for my company. I hate select boxes, so this will totally redefine how I look at them. Bill August 1, Can somebody please see if this problem can be duplicated. It does it on IE7 PC and FireFox Mac On the Demo: Make the window size small so that you need to scroll down to access the drop down.

Once Scrolled down click the drop down 3. Janko August 1, Ben: Thanks for sharing the code, once again: Webdesign Santhos August 2, Looks pretty awesome although it would be great if you could also use the keyboard to navigate through the list. Romeo August 2, Very nice is, that it works without js too: TNk August 3, excellent ty!! Janko August 4, Thanks everyone! Janko August 4, dbone: I just tried and it works fine.

Did you get any errors? Bill August 4, Janko, Thanks for the advice. Scott D August 22, I wanted to utilize this on a page with multiple dropdowns and with the current config, it was only working with one per page. Thanks, Vivek Michael August 24, Hello Janko, First off, excellent tutorial!

Edward August 27, Nice work. I like your tutorials and will definitely learn from them. Moksha Solutions August 31, nice tutorial.

This is how I did it. Vladimir October 22, Hi Janco. Marcus Downing October 30, I worked around my problem by putting an alternative copy of the contents into the label attribute, and pulling those out on conversion: I was exactly looking for the same.