Problem Changing Options in <SELECT>

[Hal Vaughan]

I have a sample script from a book ("Beginning JavaScript" by Paul Wilton)
that removes or adds a choice to a <SELECT> element. The <FORM> is form1
and the <SELECT> is theDay. The example uses these lines (full text is
below):

if (document.form1.theDay.options[2].text != "Wednesday) {
var days = document.form1.theDay;
days.options[indexCounter].text = days.options[indexCounter - 1].text;
<snip>
var option - new Option("Wednesday", 2);
days.options[2] = option;
}

And everything works fine. (I'm testing this on Konquer and Galeon on Linux
and Opera and IE on Windows.)

Now, in my page, I have a <FORM> named oForm and a <SELECT> named
selectLetterNames. I've found that, in order to access the <SELECT>
element, I have to call the script from within the <FORM>, I can't access
it from outside with "document.oForm.selectLetterNames" (Why is this? I
would think if I specify it using proper notation I could access it
anywhere in the document.) I have an array and I'm trying to put the items
into selectLetterNames. I doubt the entire code is necessary, but I've
tested a few different lines. (The commented out lines are ones that I've
used for testing.):


function setSelect(oSelect, value) {
//function setSelect() {
var otest = document.oForm.selectLetterName;
document.write("Starting with select<br>");
var newOption = new Option("The Text", "TheValue");
// otest.options[1].text = "MyNewText";
// document.oForm.selectLetterName.options[1].text = "MyNewText";
// otest.options[0] = newOption;
for (index in value) {
document.write("Index: " + index + ", Value: " + value[index] + "<br>");
// oTest.options[index] = newOption;
// newOption=(value[index], value[index]);
// oSelect.options[index] = newOption;
// document.oForm.selectLetterName.options[index] = newOption;
}
// var oOpt = document.oForm.selectLetterName.options[0];
// if (document.oForm.selectLetterName.options[0].text == "Text") {
// alert('Equal');
// }
// oTest.options[0] = null;
// document.oForm.selectLetterName.options[0].text = "text";
// document.oForm.selectLetterName.options[0].value = "value";
document.write("Done with loop<br>");
var oTest1 = document.oForm;
document.write("Between assigns<br>");
var oTest2 = document.oForm.selectLetterName;
document.write("Done with select<br>");
return;
}

Whenever I do ANYTHING using the options properties, I get errors, for
example, I can't see why this won't work:

var otest = document.oForm.selectLetterName;
var newOption = new Option("The Text", "TheValue");
otest.options[0] = newOption;

But the last line ALWAYS creates an error. I can't understand why the
example above, from the book works, but no matter what I do, whenever I try
to do ANYTHING with the .options[x] on the <SELECT> object, it won't work.
I also can't see why it works in the example from the book, but not in my
routine. There are no errors generated by accessing the <SELECT> object
itself, only any .options[x] elements.

Also -- what version of JavaScript does a browser need for this to work (I'm
not worried about my browsers -- it obviously works in them since the
example from the book works.)

I'm aware it could even be a typo -- I've gone over and over the code
carefully, but sometimes I can't distinguish between similar character
sequences.

Thanks for any help!

Hal

------------------------------------------------------------------------------
<SCRIPT LANGUAGE=JavaScript>

function butRemoveWed_onclick()
{
if (document.form1.theDay.options[2].text == "Wednesday")
{
document.form1.theDay.options[2] = null;
}
else
{
alert('There is no Wednesday here!');
}
}

function butAddWed_onclick()
{
if (document.form1.theDay.options[2].text != "Wednesday")
{
var indexCounter;
var days = document.form1.theDay;
var lastoption = new Option();
days.options[6] = lastoption;

for (indexCounter = 6;indexCounter > 2; indexCounter--)
{
days.options[indexCounter].text = days.options[indexCounter - 1].text;
days.options[indexCounter].value = days.options[indexCounter -
1].value;
}

var option = new Option("Wednesday",2);
days.options[2] = option;
}
else
{
alert('Do you want to have TWO Wednesdays?????');
}
}

</SCRIPT>
</HEAD>
<BODY>

<FORM NAME=form1>
<SELECT NAME=theDay SIZE=5>
<OPTION VALUE=0 SELECTED>Monday
<OPTION VALUE=1>Tuesday
<OPTION VALUE=2>Wednesday
<OPTION VALUE=3>Thursday
<OPTION VALUE=4>Friday
<OPTION VALUE=5>Saturday
<OPTION VALUE=6>Sunday
</SELECT>
<BR>
<INPUT TYPE="button" VALUE="Remove Wednesday" NAME=butRemoveWed
onclick="butRemoveWed_onclick()">
<INPUT TYPE="button" VALUE="Add Wednesday" NAME=butAddWed
onclick="butAddWed_onclick()">
<BR>
</FORM>
</BODY>
</HTML>

 

[Lee]

Hal Vaughan said:

document.write("Done with loop<br>");
var oTest1 = document.oForm;
document.write("Between assigns<br>");
var oTest2 = document.oForm.selectLetterName;
document.write("Done with select<br>");
return;
}

Whenever I do ANYTHING using the options properties, I get errors, for
example,

Don't use document.write() in a page that's already loaded.
As soon as you write() new content to the page, the previous
contents, including your form, the select object and the
options are all deleted.

Use alert() popups or open a second page and write to it.

 

[Richard Cornford]

..., I have to call the script from within the <FORM>,

I can't access it from outside with
"document.oForm.selectLetterNames" (Why is this? I would think if
I specify it using proper notation I could access it
anywhere in the document.) ...

<snip>

Mostly accessing a form as a property of document should work. I prefer
the more formal approach of accessing the form as a named property of
the document.forms collection and the form elements as named properties
of the form's elements collection:-

document.forms.oForm.elements.selectLetterNames

-or:-

document.forms['oForm'].elements['selectLetterNames']

function setSelect(oSelect, value) {
//function setSelect() {
var otest = document.oForm.selectLetterName;
document.write("Starting with select<br>");

Once a document is closed (which happens somewhere between the browser
reading the end of the HTML and it triggering the onload event) any
document.write (or writeln) call will open, clear and replace the
current document. so following the preceding statement the object that
the local variable - otest - was pointing to will have ceased to exist.
Any subsequent attempt to access it is likely to produce errors.

var newOption = new Option("The Text", "TheValue");

There are some browsers that do not have an Option constructor (Web
Browser 2.0 on the palm OS at least) so the general principal of testing
browser features prior to using them should certainly be applied to
scripts that attempt to create new Options.

Also -- what version of JavaScript does a browser need for this to
work (I'm not worried about my browsers -- it obviously works in
them since the example from the book works.)

JavaScript is probably best though of as a language for scripting object
models. In the case of web browsers that object model is the browser's
document object model (DOM). When it comes to whether a script will work
on a browser the answer is more often than not to be found in the
browser's DOM implementation.

<SCRIPT LANGUAGE=JavaScript>

<snip>

The language attribute is deprecated in HTML 4 and the type attribute is
required, so maybe - <script type="text/javascript"> - instead.

Richard.

 

[Hal Vaughan]

What do you mean by "call the script from within the <FORM>"?

If I have the script tags, SRC= for scripts in files, and the rest of the

I can't access it from outside with
"document.oForm.selectLetterNames" (Why is this? I would think if
I specify it using proper notation I could access it
anywhere in the document.) ...

<snip>

Mostly accessing a form as a property of document should work. I prefer
the more formal approach of accessing the form as a named property of
the document.forms collection and the form elements as named properties
of the form's elements collection:-

document.forms.oForm.elements.selectLetterNames

-or:-

document.forms['oForm'].elements['selectLetterNames']

I didn't know about that. I've done very little programming in JavaScript.
(I used to hate it and think it was screwed up, but then I found I had
learned it from a bad text, and that was the cause of most of my
frustrations.)

Once a document is closed (which happens somewhere between the browser
reading the end of the HTML and it triggering the onload event) any
document.write (or writeln) call will open, clear and replace the
current document. so following the preceding statement the object that
the local variable - otest - was pointing to will have ceased to exist.
Any subsequent attempt to access it is likely to produce errors.

Didn't know that at all. Thanks for that info.

There are some browsers that do not have an Option constructor (Web
Browser 2.0 on the palm OS at least) so the general principal of testing
browser features prior to using them should certainly be applied to
scripts that attempt to create new Options.

Good point, and thanks. This is intended for a limited audience, and I can
easily put a restriction on it and say it doesn't support handhelds.

JavaScript is probably best though of as a language for scripting object
models. In the case of web browsers that object model is the browser's
document object model (DOM). When it comes to whether a script will work
on a browser the answer is more often than not to be found in the
browser's DOM implementation.

Hadn't looked at it that way at all. Again, thanks for some good info.

<snip>

The language attribute is deprecated in HTML 4 and the type attribute is
required, so maybe - <script type="text/javascript"> - instead.

So will that work acceptably in older browsers? If not, how far back (on IE
and NN, for example) can I expect it to work?

Richard.

Thanks for a LOT of very useful information. It's been a big help to me!

Hal

 

[Thomas 'PointedEars' Lahn]

If I have the script tags, SRC= for scripts in files, and the rest of the
script within the <FORM></FORM> tags, it's aware of the object in the form,
otherwise it isn't.

Worng. Objects can be referenced in the Document Object Model
(DOM) of the user agent once they have been loaded.

Placing `script' _elements_ within other elements is not only
not necessary but also results in invalid HTML in many cases,
and if the referenced object was not properly loaded, also in
script errors. For forms this means you cannot presume that
the respective HTMLFormElement object can be referenced
successfully before the `load' event of the `body' element occurs,
i.e. its `onload' event handler fires.


PointedEars

 

[Christopher Jeris]

Placing `script' _elements_ within other elements is not only
not necessary but also results in invalid HTML in many cases,

How, other than intertwined (improperly nested) start/end tags?
(This is an honest question.)

 

[Thomas 'PointedEars' Lahn]

How, other than intertwined (improperly nested) start/end tags?

I have seen people writing

<table ...>
...
<script type="text/javascript">
for (var i = 0; i < data.length; i++)
{
document.write("<tr>...<\/tr>");
}
</script>
...
</table>

for example.

(This is an honest question.)

Of course.


PointedEars

 

[Laurent Bugnion, GalaSoft]

Hi,

How, other than intertwined (improperly nested) start/end tags?
(This is an honest question.)

One (IMHO) excellent example is the APPLET tag. Many people ask how it's
possible to set the list of parameters at runtime, with document.write.
The following doesn't work at all (the applet will not be displayed):

<APPLET ...>
<SCRIPT>
document.writeln( '<PARAM...>' );
</SCRIPT>
</APPLET>

(of course replace the '...' with real values).

So the solution to that is either to document.write the full
<APPLET...</APPLET> tag pair, including all the parameters, or to use
LiveConnect at runtime to communicate the parameters to the Applet.

Laurent