extend/sub-class HTMLSelectElement

[Bill M.]

Hello,

I would like to extend or sub-class the base HTMLSelectElement and add some
custom properties and methods. So far this works to create a new select
element.

var new_select= new Selector('new_select');

Selector = function(id) {
var container = document.getElementById(id);
selector = document.createElement("select");
container.appendChild(selector);
selector.id = id;
selector.name = id;
return selector;
}

but the prototype mentods are not showing up ...

Selector.prototype.setOptions = function(optionlist) {
...
}

.... so this doesn't work: new_select.setOptions(optionlist);

what would be the proper way do to this? Do I need to sub-class from a DOM
object that exposes a constructor to create elements (e.g.
Selector.prototype = some_constructor)?

Thanks,

Bill

 

[Bill M.]

Well, I found a couple of different possibilities:

1. create the method explicitly

Selector = function(id) {
var container = document.getElementById(id);
selector = document.createElement("select");
container.appendChild(selector);
selector.id = id;
selector.name = id;
selector.setOptions = new Function({ ... code here ...});
return selector;
}

Which is ok, but I would rather define the function outside of the
contructor.

2. extend ALL HTMLSelectElements in the document

HTMLSelectElement.prototype.setOptions = function(optionlist) {
... code here ...
}

Which is kind of cool but I'm not sure I want ALL select elements to be
bloated down by the protype methods.

Any other ideas?

Thansk

 

[Bill M.]

1. create the method explicitly

Selector = function(id) {
var container = document.getElementById(id);
selector = document.createElement("select");
container.appendChild(selector);
selector.id = id;
selector.name = id;
selector.setOptions = new Function({ ... code here ...});
return selector;
}

2. extend ALL HTMLSelectElements in the document

HTMLSelectElement.prototype.setOptions = function(optionlist) {
... code here ...
}

In method #1 I simplified ..

selector.setOptions = new Function({ ... code here ...});

to the more managable ...

selector.setOptions = setOptions;

and defined setOptions elsewhere, however this doesn't work and I'm stumped
as to why. Method #2 doesn't work either, even though I can see the function
in my DOM Inspector.

My quest for the truth continues.

 

[Lasse Reichstein Nielsen]

I would like to extend or sub-class the base HTMLSelectElement

Elements cannot be sub-classed, only classes can. Javascript doesn't
have classes.

and add some custom properties and methods.

So what you want is to add some properties to all select elements?

So far this works to create a new select element.

var new_select= new Selector('new_select');

Selector = function(id) {

Always prefix your variables with "var". There is no good reason
for not doing it, and it avoids surprices in some cases.

var container = document.getElementById(id);
selector = document.createElement("select");

"var selector"! I assume it is meant to be a local variable.

container.appendChild(selector);
selector.id = id;

You give the selector the same id as the container. Id's must be unique
in the document, so this is wrong!

selector.name = id;
return selector;
}

but the prototype mentods are not showing up ...

Selector.prototype.setOptions = function(optionlist) {
...
}

This shows up on the new object that is created by new Selector('..') .
However, this new object is not the object you return. Instead you return
a newly created select element that has nothing to do with the constructor.

what would be the proper way do to this?

If you could find the constructor for HTMLSelectElement, you could add
it there. However, there is no such publically available constructor.

As your later messages sugges, the solution is to add the property
directly to each select element.

Do I need to sub-class from a DOM object that exposes a constructor
to create elements (e.g. Selector.prototype = some_constructor)?

Que? You lost me there

/L

 

[Thomas 'PointedEars' Lahn]

If you could find the constructor for HTMLSelectElement, you could add
it there. However, there is no such publically available constructor.

There is no need to find the constructor function, at least not in Mozilla/5.0:

HTMLSelectElement.prototype.foo = 42;
HTMLSelectElement.prototype.bar = function() { alert(this.foo); };
var oSelect = document.createElement("select");
oSelect.bar(); // 42


PointedEars

 

[Bill M.]

There is no need to find the constructor function, at least not in
Mozilla/5.0:

HTMLSelectElement.prototype.foo = 42;
HTMLSelectElement.prototype.bar = function() { alert(this.foo); };
var oSelect = document.createElement("select");
oSelect.bar(); // 42

Yea, I tried that and it didn't seem to work. Maybe I mucjed something up.
My DOM Inspector showed that add-on properties and functions where there,
but I wasn't able to work with them.

I found another way to do what I wanted anyway:

Foo = funtion(prop) {
foo = document.createElement("select");
foo.property = prop;
foo.fun = fun;
return foo;
}

function fun (param){
....
}

var bar = new Foo('frog');

bar.fun('egg');

This has the advantage of not havin to have all <select> 's inherit uneeded
props and methods.

Cheers,

Bill