selectedIndex Bug?

[afetsch]

It's been quite awhile since I've written anything in JavaScript, so
please pardon my ignorance if I'm missing the obvious. The following
code works fine in Firefox, but not in IE (unless I include an alert).

The piece of code that's giving me grief is:
function doThis() {
// alert('Activate this line makes it work');
var iSelectedValue =
document.getElementById('mySelect').options[document.getElementById('mySelect').selectedIndex].value;
alert(iSelectedValue);
}

I get an "Object doesn't support this property or method" error in IE
on the first time I run the function, subsequent calls to the function
don't give me an error, but do give me screwy results. If I uncomment
the alert before the line with the selectedIndex reference everything
works fine in IE.

The full example is at www.velocitypath.com/example1.html

Any help is greatly appreciated!

[Kevin Darling]

af*****@gmail.com wrote:

The piece of code that's giving me grief is:
function doThis() {
// alert('Activate this line makes it work');
var iSelectedValue =
document.getElementById('mySelect').options[document.getElementById('mySelect').selectedIndex].value;
alert(iSelectedValue);
}

I get an "Object doesn't support this property or method" error in IE
[..]
The full example is at www.velocitypath.com/example1.html

Actually, the code that's giving you grief is your:

<select id="mySelect" multiple="multiple" size="10"
onClick="doThis();">

Change "onclick" to "onchange" and all will work fine. Apparently the
onclick is firing first, and you're simply getting the previous
selectedIndex, which on the first click would be -1.

Cheers - Kev

[RobG]

af*****@gmail.com wrote:

It's been quite awhile since I've written anything in JavaScript, so
please pardon my ignorance if I'm missing the obvious. The following
code works fine in Firefox, but not in IE (unless I include an alert).

The piece of code that's giving me grief is:
function doThis() {
// alert('Activate this line makes it work');
var iSelectedValue =
document.getElementById('mySelect').options[document.getElementById('mySelect').selectedIndex].value;

Ignoring the rather horrible code, the issue appears to be related to
the select element's multiple attribute. In this case, it seems that
IE does not allocate a default selected option. doThis() is called
onclick, so when called for the very first click, the selectedIndex at
that point returns -1. There is no option with index -1 so an error
results. I suspect that the alert allows time for the click to filter
through and cause an option to be selected, hence the error doesn't
occur in that case.

There are a couple of solutions, but that depends on what you are
actually trying to do.

Incidentally, if you ctrl+click to select multiple options, you only
get the selected index of the first selected option.

I would pass 'this' from the select, so the code is more like:

function doThis(sel){
var selectedValues = [];
for (var i=0, len=sel.length; i<len; i++){
if (sel[i].selected) {
selectedValues.push(sel[i].value);
}
}
alert('You selected:\n' + selectedValues.join('\n'));
}

But you'll note that the result is still one click behind.

alert(iSelectedValue);
}

I get an "Object doesn't support this property or method" error in IE
on the first time I run the function, subsequent calls to the function
don't give me an error, but do give me screwy results.

The results are quite predictable - IE reports the previously selected
option, which indicates that onclick runs before the selectedIndex
property is changed. Doing:

<select id="mySelect" multiple="multiple" size="10"
onClick="alert(this.selectedIndex);">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Shows -1 the first time the select is clicked on.
--
Rob

[Drew]

Kev and Rob,

Thank you so much! I've switched to the onChange event. That fixed it.
I've also updated to pass "this". Feel good that you've helped someone
today!

[ASM]

af*****@gmail.com a écrit :

It's been quite awhile since I've written anything in JavaScript, so
please pardon my ignorance if I'm missing the obvious. The following
code works fine in Firefox, but not in IE (unless I include an alert).

Try to slowly explain to IE what exactly you want ?

function doThis() {
var selct = document.getElementById('mySelect');
var idx = selct.options.selectedIndex;
var iSelectedValue = selct.options[idx].value;
alert(iSelectedValue);
}

Probably better
if you could have a form named ( <form name="myForm" ...)
and the select too ( <select name="mySelect" id="mySelect" ... )
and use the old way to do :

function doThat() {
var opts = document.forms['myForm'].mySelect.options;
var iSelectedValue = opts[opts.selectedIndex].value;
alert(iSelectedValue);
}

--
Stephane Moriaux et son [moins] vieux Mac