Creating a custom list box

snotmare · Feb 2, 2006

Greetings!

I have recently decided that I'm not too fond of the standard "SELECT" control (list box) that microsoft provides, so I've decided that I'm going to try and create my own.

Before I go any further, if this has already been done, please direct me to where I can get ahold of that code.

Here are the requirements...
1. The code must reside in a separate .js file.
2. The code must allow for multiple list boxes on a single page, so each must be given a separate name.
3. The code must store the value, displayed text, and other basic functions that a typical list box would provide.
4. The code must be flexible enough so I can add functions like highlighting on mouse over, etc.

I would like to create the list box as an object, so that in the HTML page that houses the custom list box, I can simply code something like:

Code:

alert(objList1.GetValue(2));

Creating the object is where I'm stuck. lol, I know that's not very far, but once I can grasp this, I think the rest should be fairly simple.

Based on other code I've seen, here is what I have so far.
The htm file...

Code:

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript" SRC="CustomListBox.js"></SCRIPT>

<SCRIPT type=text/javascript>
    alert(objList1.GetValue(2));
</SCRIPT>
</HEAD>
<BODY>

<SCRIPT type=text/javascript>BuildListBox("objList1");</SCRIPT>

</BODY>
</HTML>

The js file...

Code:

//Arrays
var aryText = new Array();
var aryValue = new Array();


function BuildListBox(strName){
	eval(strName + " = new ListBoxObject()");
}

function ListBoxObject(){
	aryValue[0] = "value 0";
	aryValue[1] = "value 1";
	aryValue[2] = "value 2";
	aryValue[3] = "value 3";
}

function GetValue(intIndex){
	return aryValue[intIndex];
}

Currently, I'm getting an error on line 6 of the htm file saying that "objList1" is undefined.

I know that my problem is in the js file, as even what I have now doesn't make a whole lot of sense. Perhaps I'm too used to VBScript. Is there anyone who could give me a push here?

Thank you much!

He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

tsuji · Feb 2, 2006

Basically, you should take good care of timing. Try this if you know objList1 is built via the js etc as a global variable and it would eventually be built (there is a recurrent call until you add some addition device to stop if it ever fails to build).
[tt]
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript" SRC="CustomListBox.js"></SCRIPT>
<SCRIPT type=[red]"[/red]text/javascript[red]"[/red]>
[blue]function showit() {
if (objList1) {[/blue]
alert(objList1.GetValue(2));
[blue]} else {
setTimeout("showit()",200);
}
}[/blue]

[blue]window.onload=function() {[/blue]
BuildListBox("objList1");
showit();
[blue]}[/blue]
</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>
[/tt]

snotmare · Feb 3, 2006

Thanks tsuji, that'll work pretty well with the HTML, but I'm having trouble actually creating the object in the javascript. That's where I need a bit of help for the moment.

There is a popup calendar at this site:

http://dynamicdrive.com/dynamicindex7/jasoncalendar.htm

...where the javascript creates a customized calendar object. I'm trying to mimik that somewhat by creating my own custom object. I haven't quite figured out how this code is actually creating the object, but that's what I'm trying to go off of in case anyone wanted to reference it too.

Still stuck.

He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

snotmare · Feb 3, 2006

Yea-ha! I got it to work...

Same HTML as above, but here is the javascript...

Code:

//Arrays
var aryText = new Array();
var aryValue = new Array();


function BuildListBox(strName){
	eval(strName + " = new ListBoxObject()");
}

function ListBoxObject(){
	aryValue[0] = "value 0";
	aryValue[1] = "value 1";
	aryValue[2] = "value 2";
	aryValue[3] = "value 3";
	
	this.GetValue = new Function("intIndex", "return aryValue[intIndex]");
}

Now, does anyone know of a beter way to do this, or is this the only way I can create an object and reference it in HTML?

He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

snotmare · Feb 3, 2006

Wait, sorry, not EXACTLY the same HTML as above, here is the slightly revised HTML. I did make the alert box happen after the html was loaded like tsuji suggested.

Code:

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript" SRC="CustomListBox.js"></SCRIPT>

<SCRIPT type=text/javascript>
    
    function test(){
    	alert(objList1.GetValue(2));
    }
</SCRIPT>
</HEAD>
<BODY ONLOAD="test();">

<SCRIPT type=text/javascript>BuildListBox("objList1");</SCRIPT>

</BODY>
</HTML>

He who has knowledge spares his words, and a man of understanding is of a calm spirit. Even a fool is counted wise when he holds his peace; when he shuts his lips, he is considered perceptive. - King Solomon

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Creating a custom list box

snotmare

Programmer

tsuji

Technical User

snotmare

Programmer

snotmare

Programmer

snotmare

Programmer

Similar threads

Part and Inventory Search

Sponsor