Ask YC: html select = javascript dropdown ? | Hacker News Reader

Ask YC: html select = javascript dropdown ?

2 pointsa27 comments

I want to add a standard dhtml drop down to my application but in an unobtrusive manner so I'd like to display a standard html select and convert that into a drop down if javascript is enabled.

I've looked at several javascript libraries but nothing seems to fit the bill. They all require creation of the dropdown using divs and spans. Does anyone know of anything that can convert an existing html select?

View on HN

I think this is what you need. I cut it out of some working code and simplifed a little, didn't check if the modification works thou, but the concept should.

<form> <select id="dropdown" multiple="multiple" onfocus="expandselect('dropdown');return false" onblur="depressselect('dropdown');return false"> <option disabled="disabled">Browser does not support dynamic option</option> </select> </form>

function el(id) { return document.getElementById(id); }

options=['test1','test2','test3'];

Surely, you can just generate the JavaScript dropdown dynamically and replace the HTML select element in the DOM?

DHTML dropdowns need to be created using HTML markup - divs and spans would work, but an unordered list makes a bit more structural sense.

You'll have to write code that creates an empty list, finds your select box, loops through all of the options within it, creates a list item with the same text in it as each of those options, appends the list item to the empty list and then appends that list in to the DOM. Then you can trigger an existing dropdown library against your newly created list (and remove the select box from the DOM).

This might help you: http://individed.com/code/select-improvement/

I wrote it for a specific instance so it isn't super robust, but it could at least get you started.

Edit: Actually, it sounds like you're talking about using this for navigation and not a form. In that case you should be using an unordered list as your starting point, not a select.

You can turn ULs into dropdowns with just css and there are plenty of examples around. Here's one I found after a quick Google: http://www.cssplay.co.uk/menus/final_drop.html

Using jQuery, you could get each option from the Select, and make it a div/span (or more commonly, a UL for drop downs)

for this example include jquery and superfish libraries

//Insert a new node under select id $("#SelectId").after("<ul id='newUl'></ul>"); $("#SelectId").hide(); $("#SelectId option").each(function(){$("#newUl").append("<li>"+this.html()+"</li>");});

//Now you have made a UL from a Select box, so use something like superfish to make it a dropdown $("#newUl").superfish();

Build an HTML list and then use your favorite library's ready() function to destroy that list and replace it with a Javascript dropdown.

That's what a noscript tag is for.

Reply on news.ycombinator.com