dojox.form.DropDownSelect

Status:Draft
Version:1.2
Project owner:Nathan Toone
Available:since V1.2

A styleable drop down select box (similar to html select element)

Introduction

HTML Select tags are problematic when it comes to styling - they are not very styleable, not to mention nearly impossible to get a consistent cross-browser widget. This widget aims to resolve that issue.

Usage

The DropDownSelect is designed to replace existing HTML select elements with minimal effort. You can also create them programmatically.

Examples

A simple DropDownSelect

This example shows a simple DropDownSelect widget - converted from a select tag.

<script>
  dojo.require("dojox.form.DropDownSelect");
</script>
<select name="select" dojoType="dojox.form.DropDownSelect">
    <option value="TN">Tennessee</option>
    <option value="VA" selected="selected">Virginia</option>
    <option value="WA">Washington</option>
    <option value="FL">Florida</option>
    <option value="CA">California</option>
</select>
<style type="text/css">
  @import "/_static/dojo/dojox/form/resources/DropDownSelect.css";
</style>

A “styled” DropDownSelect

When styling the entries of a DropDownSelect, you must use div and span tags, instead of select and option tags - as IE will strip out any HTML within the option tags.

<script>
  dojo.require("dojox.form.DropDownSelect");
</script>
<div name="select" value="AK" dojoType="dojox.form.DropDownSelect">
    <span value="AL"><b>Alabama</b></span>
    <span value="AK"><font color="red">A</font><font color="orange">l</font><font color="yellow">a</font><font color="green">s</font><font color="blue">k</font><font color="purple">a</font></span>
    <span value="AZ"><i>Arizona</i></span>
    <span value="AR"><span class="ark">Arkansas</span></span>
    <span value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a</span></span>
    <span value="NM" disabled="disabled">New<br>&nbsp;&nbsp;Mexico</span>
</div>
<style type="text/css">
  @import "/_static/dojo/dojox/form/resources/DropDownSelect.css";
  .ark { text-decoration: underline; }
</style>