select box selectedValue() method

[kitchen]

Hi folks,

I'm sick of typing stuff like:

var txt = document.getElementById('selBox').options[document.getElementById('selBox').selectedIndex].value

so I sought out to add a method to the HTMLSelectElement class called selectedValue.

This is what I came up with:

HTMLSelectElement.prototype.selectedValue = function () {
   return this.options[this.selectedIndex].value
}

which works wonderfully in Firefox, but not in IE or konqueror. Is this valid and IE/konq are non-compliant, or is FF being nice and going the extra mile to let me do it?

I realize that I could implement this as a simple function call:

function selectedValue(selBox) {
  return selBox.options[selBox.selectedIndex].value;
}

and then retrieve the value with selectedValue(document.getElementById('selBox')), but I thought it would be more fun to implement as a method to the existing object

So, long story short, is it valid to extend the existing HTMLSelectElement class with my own methods or should I just stick to using functions?

I'm not concerned with browser support of this, I would like to know if it's *valid* ... so I know who to point the finger at

-Jeremy

[Kravvitz]

Unfortunately, not all browsers expose the HTML*Element objects in such a way that you can add prototypes.

Since the custom methods don't work cross-browser, I recommend just sticking with normal functions.

[kitchen]

I was afraid of that.

Thanks for the answer

-Jeremy

[Ultimater]

Something like this will do what you want.

<script type="text/javascript">
onload=function(){
var els=document.getElementsByTagName("select"),i,l=els.length;

for(i=0;i<l;i++){
els[i].selectedValue = function(){return this.options[this.selectedIndex].value};
els[i].selectedText = function(){return this.options[this.selectedIndex].text};
}

}
</script>

BTW, instead of doing:

var txt = document.getElementById('selBox').options[document.getElementById('selBox').selectedIndex].value

You can also write it like this:

var txt = document.getElementById('selBox').value

[Kravvitz]

That's a good idea, Ultimater.

NS4.x doesn't support the value property of select elements, which is why the other way is used. I don't know if any other JavaScript browsers don't support it.

[Ultimater]

Ohhhh, that is the reason why I see people writting it the long way, thanks for the information Kravvitz.

Anyways it doesn't really make much of a differenece in NS4.x 's case anyways because it lacks DOM support. e.g. the getElementsByTagName DOM method would be a good example of an irreplaceable DOM method. However I'll know for the future.