Question about a select list? (code attached)

[Italio Novuas]

Hi all, let me begin by saying that I *ALMOST* have this complete!
What I'm trying to do is make it so my text area shows the innerHTML
of any select item with the same value. For example, if I have a
select list with 5 options:

<select name="select" onChange="changeValues();">
<option value="1">Option 1</option>
<option value="1">More stuff on option 1</option>
<option value="1">EVEN more option one stuff!!</option>
<option value="2">Option 2</option>
<option value="2">Some more option 2 stuff</option>
</select>

<textarea name="testimonialText" cols="45" rows="10">I'm merely a text
area.</textarea>

If a user selects option 1, then I would like all of the option 1
stuff to appear within the text area.

The code I have seems to *almost* be working properly, but if someone
could lend me a hand and point out what I'm doing wrong, it would be
VERY much appreciated.

Here's what I have so far:
function changeValues() {
var e = document.getElementById('select')
[document.getElementById('select').selectedIndex].innerHTML;
var en = e.replace("&nbsp;&nbsp;", '');
var s = en.replace("&amp;", '&');
//document.myform.testimonialText.value =s;

var myOptions;
for (myOptions=0; myOptions < window.document.myform.select.length;
myOptions++)
{
var se = document.getElementById('select')[myOptions].innerHTML;
if (window.document.myform.select.options[myOptions].value ==
window.document.myform.select.options[myOptions+1].value ) {
// alert(document.myform.select.options[myOptions].innerHTML);
document.myform.testimonialText.value =
document.getElementById('select')
[document.getElementById('select').selectedIndex].innerHTML;
} else {
//alert("no");
}
}


//alert(en);
}

Thank you for your help!

 

[RobG]

Hi all, let me begin by saying that I *ALMOST* have this complete!
What I'm trying to do is make it so my text area shows the innerHTML
of any select item with the same value.

Don't use innerHTML, the content of an option element is plain text.
You get its value using the option element's text property.

For example, if I have a
select list with 5 options:

<select name="select" onChange="changeValues();">
<option value="1">Option 1</option>
<option value="1">More stuff on option 1</option>
<option value="1">EVEN more option one stuff!!</option>
<option value="2">Option 2</option>
<option value="2">Some more option 2 stuff</option>
</select>

<textarea name="testimonialText" cols="45" rows="10">I'm merely a text
area.</textarea>

If a user selects option 1, then I would like all of the option 1
stuff to appear within the text area.

The code I have seems to *almost* be working properly, but if someone
could lend me a hand and point out what I'm doing wrong, it would be
VERY much appreciated.

Here's what I have so far:
function changeValues() {
var e = document.getElementById('select')

It's not a good idea to give an element an ID that is the same as it's
tag name. Besides, you set its name attribute to select, not its ID.
IE thinks they're the same thing but other browsers know better.
Either add an ID attribute or use the name attribute explicitly.

[document.getElementById('select').selectedIndex].innerHTML;

That is very inefficient - store a reference to the select element and
re-use it. To get all the options with the same value, loop over the
select's options collection.

function changeValues() {
var sel = document.forms['myform'].elements['select'];
var value = sel.options[sel.selectedIndex].value;

Get the reference to the text area here too:

var ta = document.myform.testimonialText;

var en = e.replace("&nbsp;&nbsp;", '');
var s = en.replace("&amp;", '&');

I guess they do something useful in the "real" system.

//document.myform.testimonialText.value =s;

var myOptions;
for (myOptions=0; myOptions < window.document.myform.select.length;
myOptions++)

On every loop, the browser must resolve that reference and will get
exactly the same value every time - store it in a local variable.
Consider:

var opt;
for (var i=0, len=sel.options.length; i<len; i++)

{
var se = document.getElementById('select')[myOptions].innerHTML;
if (window.document.myform.select.options[myOptions].value ==
window.document.myform.select.options[myOptions+1].value ) {
// alert(document.myform.select.options[myOptions].innerHTML);
document.myform.testimonialText.value =
document.getElementById('select')
[document.getElementById('select').selectedIndex].innerHTML;

opt = sel.options;
if (opt.value == value) {
ta.value += opt.text;


Here's the whole function in one go:

function changeValues() {
var sel = document.forms['myform'].elements['select'];
var value = sel.options[sel.selectedIndex].value;
var ta = document.forms['myform'].elements['testimonialText'];
ta.value = '';

var opt;
for (var i=0, len=sel.options.length; i<len; i++) {
opt = sel.options;
if (opt.value == value) {
ta.value += opt.text;
}
}
}

 

[Italio Novuas]

Rob -
Thank you for your help. Your explaination was very clear and easy to
follow! I have rated you 5 stars!! Thanks so much!

 

[Thomas 'PointedEars' Lahn]

It's not a good idea to give an element an ID that is the same as it's
tag name.

Why?


PointedEars