By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,672 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

drop down error

P: n/a
hello,
Question, on page load, I populate an existing drop down with
createElement and appendChild. It works fine so far. BUT I want to
automatically select some option from this populated drop down. So i
have this statement:

document.getElementById("dropdown").options[someindex].selected=true;

And it gives me an error.

Surprisingly, when i put an alert statement before appending the
created element to dropdown, the error doesn't occur.
Can anyone help please?

Thanks

Jul 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
debugger wrote:
hello,
Question, on page load, I populate an existing drop down with
createElement and appendChild. It works fine so far. BUT I want to
automatically select some option from this populated drop down. So i
have this statement:

document.getElementById("dropdown").options[someindex].selected=true;

And it gives me an error.
What is the error message?
Surprisingly, when i put an alert statement before appending the
created element to dropdown, the error doesn't occur.
That indicates a timing issue.
Can anyone help please?


Start with the group FAQ

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #2

P: n/a
debugger wrote:
hello,
Question, on page load, I populate an existing drop down with
createElement and appendChild. It works fine so far. BUT I want to
automatically select some option from this populated drop down. So i
have this statement:

document.getElementById("dropdown").options[someindex].selected=true;

And it gives me an error.

Surprisingly, when i put an alert statement before appending the
created element to dropdown, the error doesn't occur.
Can anyone help please?


Probably the browser is still creating the option when you try
to grab it with getElementById. Putting in the alert gives the
browser time to create it.

Why not set the selected attribute when you create the option?

...
var oOpt = document.createElement('option');
oOpt.selected = true;
...

Then you don't need to use gEBI.
--
Rob
Jul 23 '05 #3

P: n/a
In article <11**********************@c13g2000cwb.googlegroups .com>,
js********@yahoo.com enlightened us with...
Question, on page load, I populate an existing drop down with
createElement and appendChild. It works fine so far. BUT I want to
automatically select some option from this populated drop down. So i
have this statement:

document.getElementById("dropdown").options[someindex].selected=true;

And it gives me an error.
Magic 8 ball failed.
What's the error?

Surprisingly, when i put an alert statement before appending the
created element to dropdown, the error doesn't occur.
Can anyone help please?


Not without seeing actual code, no.
But more than likely, you're trying to access something that hasn't been
fully created/rendered yet.

--
--
~kaeli~
A little rudeness and disrespect can elevate a meaningless
interaction to a battle of wills and add drama to an
otherwise dull day.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #4

P: n/a
the error is "htmlfile: Could not set the selected property.
Unspecified error."

option element for drop down is created by:
for(.......)
{
var myEle = document.createElement("option");
myEle.value=some value;
myEle.innerHTML= some string;
document.getElementById("someDropDown").appendChil d(myEle);
}
after this, there is other for loop setting the selected property.
code causing the error:
for(var k=0; k<something; k++)
{
if(somecodition)
{
var mySelectedOption =
document.getElementById("someDropDown").options[k];
mySelectedOption.selected=true; <<<<<<<<<<<<======== error
occurs here
}
}

now when i put alert in the above "if statement", the error does not
occur.
Folks have already pointed out its a timing issue, thanks for that. But
I m not sure how to solve it.
thanks again.

Jul 23 '05 #5

P: n/a
debugger wrote:
the error is "htmlfile: Could not set the selected property.
Unspecified error."

option element for drop down is created by:
for(.......)
{
var myEle = document.createElement("option");
myEle.value=some value;
myEle.innerHTML= some string;
Yuck. Why use innerHTML?

myEle.appendChild(document.createTextNode('some string'));
document.getElementById("someDropDown").appendChil d(myEle);
Do some feature detection before using gEBI (and you should
probably include a document.all method too if using gEBI):

if (document.getElementById) {
document.getElementById("someDropDown")...;
...

Or even better, use the forms collection:

document.forms['someDropDown']...;

Avoids gEBI entirely - but see notes below.
}
after this, there is other for loop setting the selected property.
code causing the error:
for(var k=0; k<something; k++)
{
if(somecodition)
{
var mySelectedOption =
document.getElementById("someDropDown").options[k];
mySelectedOption.selected=true; <<<<<<<<<<<<======== error
occurs here
Why not keep a reference to "someDropDown" when you access it
above, then use it again when referencing the option:

var myDropDown = document.forms['someDropDown'];
myDropDown.appendChild(myEle);

...

myDropDown.options[k].selected = true;
Now there is no need for the second gEBI (or if the forms
collection is used, no need for gEBI at all)

[...] now when i put alert in the above "if statement", the error does not
occur.


Whilst Firefox does not generate an error, IE does. The error
is not fatal and the script appears to execute properly - the
option is added and selected. If users have not set IE to
report JavaScript errors, they will not see any error and the
script works fine. I would call this a bug in IE.

You can use setAttribute to keep IE happy, but then Firefox will
not select the option. Given that browser detection should only
be used as an absolute last resort, this would seem an
appropriate place to use try/catch:

if ( i == len-1){
try {
mySel.options[i].selected = true;
} catch(e) {
mySel.options[i].setAttribute('selected', true);
}
}

In future, please post code that actually replicates the error,
it makes the job of suggesting fixes much easier.

The following code implements the suggestions above and fixes
the error.

I still don't understand why you don't set myEle (the option) to
selected when you create it, that way works in both Firefox and
IE without the try/catch nastiness.
<html><head><title>play</title>
</head><body>
<script type="text/javascript">
function doStuff() {
var mySel = document.forms['aForm'].elements['someDropDown'];
var myEle = document.createElement('option');
myEle.value= 'someValue';
myEle.appendChild(document.createTextNode('some string'));

// why not set it to selected here?
// myEle.selected = true;

mySel.appendChild(myEle);

// if set to selected above, this whole block is not needed.
var len = mySel.length;
for (var i=0; i<len; i++) {
if ( i == len-1){
try {
mySel.options[i].selected = true;
} catch(e) {
mySel.options[i].setAttribute('selected', true);
}
}
}

}

</script>
</head><body>

<form action="" name="aForm">
<select name="someDropDown" id="someDropDown">
<option value="steve">Steve</option>
<option value="harry">Harry</option>
<option value="sue">Sue</option>
</select>
<br>
<input type="button" onclick="doStuff();" value="Click">
</form>

</body></html>

--
Rob
Jul 23 '05 #6

P: n/a
Thank alot Rob,

Your try and catch did the job. I didn't know about the
document.createTextNode() earlier. And thanks for pointing that out.
For your question:
// why not set it to selected here?
// myEle.selected = true;
I have three for loops and in the third for loop, i have an if
conditional to check for which item to select(as there are many to
select from). Now for others to understand my code, I have the "if"
conditional in separate for loop. Therefore I did that just for
readability purposes. I think are right, I should put it after element
is created.

Thanks again,
JS
RobG wrote: debugger wrote:
the error is "htmlfile: Could not set the selected property.
Unspecified error."

option element for drop down is created by:
for(.......)
{
var myEle = document.createElement("option");
myEle.value=some value;
myEle.innerHTML= some string;


Yuck. Why use innerHTML?

myEle.appendChild(document.createTextNode('some string'));
document.getElementById("someDropDown").appendChil d(myEle);


Do some feature detection before using gEBI (and you should
probably include a document.all method too if using gEBI):

if (document.getElementById) {
document.getElementById("someDropDown")...;
...

Or even better, use the forms collection:

document.forms['someDropDown']...;

Avoids gEBI entirely - but see notes below.
}
after this, there is other for loop setting the selected property.
code causing the error:
for(var k=0; k<something; k++)
{
if(somecodition)
{
var mySelectedOption =
document.getElementById("someDropDown").options[k];
mySelectedOption.selected=true; <<<<<<<<<<<<======== error
occurs here


Why not keep a reference to "someDropDown" when you access it
above, then use it again when referencing the option:

var myDropDown = document.forms['someDropDown'];
myDropDown.appendChild(myEle);

...

myDropDown.options[k].selected = true;
Now there is no need for the second gEBI (or if the forms
collection is used, no need for gEBI at all)

[...]
now when i put alert in the above "if statement", the error does not occur.


Whilst Firefox does not generate an error, IE does. The error
is not fatal and the script appears to execute properly - the
option is added and selected. If users have not set IE to
report JavaScript errors, they will not see any error and the
script works fine. I would call this a bug in IE.

You can use setAttribute to keep IE happy, but then Firefox will
not select the option. Given that browser detection should only
be used as an absolute last resort, this would seem an
appropriate place to use try/catch:

if ( i == len-1){
try {
mySel.options[i].selected = true;
} catch(e) {
mySel.options[i].setAttribute('selected', true);
}
}

In future, please post code that actually replicates the error,
it makes the job of suggesting fixes much easier.

The following code implements the suggestions above and fixes
the error.

I still don't understand why you don't set myEle (the option) to
selected when you create it, that way works in both Firefox and
IE without the try/catch nastiness.
<html><head><title>play</title>
</head><body>
<script type="text/javascript">
function doStuff() {
var mySel = document.forms['aForm'].elements['someDropDown'];
var myEle = document.createElement('option');
myEle.value= 'someValue';
myEle.appendChild(document.createTextNode('some string'));

// why not set it to selected here?
// myEle.selected = true;

mySel.appendChild(myEle);

// if set to selected above, this whole block is not needed.
var len = mySel.length;
for (var i=0; i<len; i++) {
if ( i == len-1){
try {
mySel.options[i].selected = true;
} catch(e) {
mySel.options[i].setAttribute('selected', true);
}
}
}

}

</script>
</head><body>

<form action="" name="aForm">
<select name="someDropDown" id="someDropDown">
<option value="steve">Steve</option>
<option value="harry">Harry</option>
<option value="sue">Sue</option>
</select>
<br>
<input type="button" onclick="doStuff();" value="Click">
</form>

</body></html>

--
Rob


Jul 23 '05 #7

P: n/a
debugger wrote:
Thank alot Rob,

Your try and catch did the job. I didn't know about the
document.createTextNode() earlier. And thanks for pointing that out.
For your question:
// why not set it to selected here?
// myEle.selected = true;

I have three for loops and in the third for loop, i have an if
conditional to check for which item to select(as there are many to
select from). Now for others to understand my code, I have the "if"
conditional in separate for loop. Therefore I did that just for
readability purposes. I think are right, I should put it after element
is created.

Thanks again,


Glad to help. :-)

--
Rob
Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.