trouble assigning events, scope problems

If javascript is enabled on the clients browser, I want be able to replace certain select lists with javascript-operated text dropdown boxes instead. The select list itself is then set to display: none, the newly created text dropdown is appended in its place and serves as interface to the select list.

I’m having trouble assigning events to the various elements that make up the text dropdown box. It’s a problem with scope but I can’t figure my way around it. (I’m fairly new with objects & anonymous functions) Please show me how to fix this.

So if this is my HTML

[CODE]
<form name=”book_order”>
<table><tr><td>
<select name=”book_title”>
<option value=”title1″>Title 1</option>
<option value=”title2″>Title 2</option>
</td></tr></table>
</form>
[/CODE]

I want to create the new text_dropdown for it like this:

[CODE]
var select_list = document.book_order.book_title;
var books_dropdown = new text_dropdown(select_list);

select_list.style.display = “none”;
select_list.parentNode.appendChild(books_dropdown.text_dropdown);
[/CODE]

It creates the element, appends it to the DOM, but I can’t get it to properly assign events. Here’s the basic function:

[CODE]
function text_dropdown(elem)
{
// create the various div, ul, li and input nodes that comprise the text_dropdown
// assign ids to the newly created elements, using elem.name as a prefix so the ids are unique
// assign other attributes like class and tabIndex, etc
// assemble text_dropdown elements together with appendChild
// final result is stored in var text_dropdown_container

// assign static variables

this.text_dropdown = text_dropdown_container;
this.select_list = elem;

// assign methods for expanding the dropdown, collapsing the dropdown, hiliting items, etc
// for example:

this.expand_dropdown = function()
{
this.text_dropdown.querySelectorAll(“div.choices_drop”)[0].style.display = “block”;
}

// set events
// HERE IS WHERE THE TROUBLE STARTS

this.set_events = function()
{
this.text_dropdown.querySelectorAll(“ul.chosen_choices_list”)[0].onmousedown = function(e)
{
alert(this.expand_dropdown); // returns “undefined”
this.expand_dropdown(); // nothing happens. the mousedown event can’t see the expand_dropdown method. What do?
}
}

// initialize the node events for the first time
this.set_events();
}
[/CODE]

Also in #JavaScript _↴