SelectList Object

Note: I forgot to remove some debugging stuff from this when I originally posted it (030401999) - it popped up an alert when you clicked on an item. I haven't updated the tutorial downloadable zip though, so you use the version posted here.

The SelectList object replicates an HTML Select List. I used to have a Select object that was similar to this, however the SelectList object contains entirely new code, and works a lot better. If you used the previous Select object, remove it and use this code instead. This object leverages off the existing List Object, and wraps it in a package resembling a selection widget.

Creating a SelectList

You must include the following DynAPI files:

<script language="JavaScript" src="dynlayer.js"></script>
<script language="JavaScript" src="list.js"></script>
<script language="JavaScript" src="selectlist.js"></script>

Create an instance of the SelectList:

objectName = new SelectList(x,y,width,height,listW)

The height refers to the height of image that's used - the selector, as I call it for lack of a better name. listW is an optional parameter for setting the width of the actual drop down list part, it's just a customizing option, I'll explain it further below. There is no way to set the height of the drop down part because that just depends on how many items are in the list.

All the functionality of the List Object is available to the SelectList Object. In the code for the SelectList, there is a list property which is in fact a List object. So to add items or change the configuration of the List in the SelectList Object, you just apply them using:

objectName.list.propertyName
or
objectName.list.methodName()

Example:

myselect = new SelectList(100,100,150,18)
myselect.list.add('zero','item 0')
myselect.list.add('one','item 1')
myselect.list.add('two','item 2')
myselect.list.add('three','item 3')
myselect.list.add('four','item 4')

Setting the Image

The image that is used for the selector is actually 3 images, a left image, right image, and a middle image that is stretchable so that you can use the same set of images for SelectLists of different widths (this is was not available in the old Select Object).

myselect.setImage(imageL,imageM,imageR,imageLw,imageRw)

You must send the widths of the left and right images (imageLw, and imageRw respectively) in order for the middle image to stretch to the remaining space.

My selector image shown above is the result of these three images:

select-imgL.gif
select-imgM.gif
select-imgL.gif

The call to setImage() would be:

myselect.setImage('select-imgL.gif','select-imgM.gif','select-imgR.gif',10,18)

The left image is 10 pixels wide, the right is 18 pixels wide, and all the heights are 18 - remember the height is set in the constructor.

Building and Displaying the SelectList

As always it follows the build(), write CSS, write Div, activate() sequence. Here's the first full example:

<html>
<head>
<title>The Dynamic Duo - SelectList Object Demo</title>
<script language="JavaScript" src="../dynlayer/dynlayer.js"></script>
<script language="JavaScript" src="../list/list.js"></script>
<script language="JavaScript" src="selectlist.js"></script>
<script language="JavaScript">

function init() {
	myselect.activate()
}

myselect = new SelectList(100,100,150,18)
myselect.list.add('zero','item 0')
myselect.list.add('one','item 1')
myselect.list.add('two','item 2')
myselect.list.add('three','item 3')
myselect.list.add('four','item 4')
myselect.setImage('select-imgL.gif','select-imgM.gif','select-imgR.gif',10,18)
myselect.build()

writeCSS (
myselect.css
)

</script>
</head>

<body bgcolor="#ffffff" onLoad="init()">

<script language="JavaScript">
document.write(myselect.div)
</script>

</body>
</html>

Example: selectlist1.html [source] - for this example.

Colors and Fonts

The colors, fonts and everything for the actual List part of the SelectList is handled by the List Object (eg. objectName.list.color.textSelected). However there are the following properties that are specific to the SelectList:

fontname = 'Helvetica'
fontsize = 11
color.text = '#000000'
color.border = '#000000'

The font properties refer only the the text that is in the "selector" (overtop the selector image). color.text is the color of the selector text, and color.border is the color of the 1 pixel border around the drop down part of the SelectList (it is only available as 1 pixel in size, if you want to add more or remove it you'd have to edit the source code).

Using the SelectList

At any time you can retrieve information from the list by retrieving the list.value or list.selectedIndex properties, as well as anything else in the list such as list.itmes[x].value.

However, do note: you cannot use the List's onSelect Event (list.onSelect). This event is used by the SelectList, if you overwrite it, the select won't work properly (ie. won't pop back closed). But I have included an onSelect event to the SelectList itself which you use instead:

objectName.onSelect = myFunction

// Do not use objectName.list.onSelect = new myFunction

I've included a SelectListRedirect event handler because the ListRedirect will not work

function SelectListRedirect() {
	location.href = this.list.value
}

Example:

mylist.onSelect = SelectListRedirect

Other Properties and Methods

There are very few things specific to the SelectList, most of it's functionality is provided by the DynLayer and List objects.

Properties:

lyr (DynLayer)
a DynLayer pointed to the top-most layer of the SelectList, all functionality of the DynLayer is available through this property/object
list (List)
the List object contained within the SelectList, all functionality of the List object is available through this property/object
closed (boolean)
whether the SelectList is closed or not (true means the drop down is visible)
textX (integer)
selector text horizontal offset, default is 0
textY (integer)
selector text vertical offset, default is 0
listX (integer)
horizontal offset of the drop down list part of the SelectList, default is 0
visibility ('inherit','hidden','visible')
CSS visibility sent to the top-most layer
zIndez (integer)
CSS zIndex sent to the top-most layer
indent (integer)
the amount of left-padding to give to the text

Methods:

toggle()
toggles the SelectList open or closed
open()
opens the drop down
close()
closes the drop down
select()
is what the List's onSelect event is handled by, this closes the drop down and sets the text of the selector when an item is selected

Example: selectlist2-custom.html [source] - for customized SelectList example.

Example: selectlist3-redirect.html [source] - for redirection example.

Source Code

selectlist.js

Home Next Lesson: ScrollList Object
copyright 1998 Dan Steinman