HN Explorer

Ask YC: html select = javascript dropdown ?

2 points by a2 ↗ HN
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?

7 comments

[ 0.19 ms ] story [ 15.9 ms ] thread
pmjordan
Surely, you can just generate the JavaScript dropdown dynamically and replace the HTML select element in the DOM?
mark-t
That's what a noscript tag is for.
simonw
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).

walesmd
Build an HTML list and then use your favorite library's ready() function to destroy that list and replace it with a Javascript dropdown.
whoisterencelee
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); }

function expandselect(selections){ if(dynaopt){ selections=selections.split(','); for(var i in selections){ var select=selections[i] if(el(select)){ el(select).size=16; el(select).multiple=true; el(select).options[0].selected=false;//quirk with switching multiple=true/false } } } }//expandselected

function depressselect(selections){ if(dynaopt){ selections=selections.split(','); for(var i in selections){ var select=selections[i] if(el(select)){ el(select).size=1; el(select).multiple=false; el(select).options[0].selected=true;//select title } }//end for }//if(dynaopt }//depressselect

function setup(){ dynaopt=true; el('dropdown').options[el('dropdown').options.length-1]=null; if(el('dropdown').options[el('dropdown').options.length])dynaopt=false;//test if dynamic option available on browser if(dynaopt){ el('dropdown').options.length=0;//clear all available el('dropdown').options[0]=new Option('Dropdown box title',null); el('dropdown').options[0].disabled=true; var i=1; for(var option in options){ el('dropdown').options[i++]=new Option(option,option); } }//dynaopt }//end of setup

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

bouncingsoul
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

izak30
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();