

Ask YC: html select = javascript dropdown ? - a2

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.<p>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?
======
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'];

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

------
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).

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

------
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.

------
mark-t
That's what a noscript tag is for.

