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

this.selectedIndex returns a number, but this.value returns ""

P: n/a
Does a SELECT element (listbox) need to be inside
a FORM element?

The code I'm playing with:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<script language="javascript" type="text/javascript">
/*
* ChangeBGColor(this)
*/
function ChangeBGColor(oSel) {
// FAILING IN IE...
//document.body.style.backgroundColor="#"+oSel.value ;
//
// alert(document.bgColor); // <--- WORKS IN IE and FF
// alert(oSel.value); // <-- FAILING IN IE
// FAILING IN IE...
// alert("oSel.options(oSel.selectedIndex).value = #" + oSel.options(oSel.selectedIndex).value);
if (document.bgColor) {
// FAILS in IE...
document.bgColor="#" + oSel.options(oSel.selectedIndex).value;
//alert(oSel.selectedIndex); // WORKS in IE. Returns index.
}
else {
//unsupported browser
alert("Your browser fails to fully support javascript.");
}
//alert(oSel.value); // FAILS in IE. Empty string (?).
//alert(oSel.name); // WORKS IN IE. Returns name of listbox.
return;
}
</script>
</head>
<body>
<p><select size="1" name="cbxSelectColor" tabindex="0"
title="Select A Color" onchange="javascript:ChangeBGColor(this);">
<option>002244</option>
<option>000000</option>
<option>ff0000</option>
<option>00ff00</option>
<option>0000ff</option>
<option>777777</option>
<option>003366</option>
<option>004488</option>
<option>0055AA</option>
</select></p>
</body>
</html>

Any suggestions as to what's going wrong? I tried it under both
the XHTML transitional and the strict doctypes.

--
Jim Carlock
Post replies to the newsgroup, thanks.
Nov 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
well it should be [] not ():

oSel.options[oSel.selectedIndex].value

Nov 23 '05 #2

P: n/a
"matty" <un**********@gmail.com> wrote:
well it should be [] not ():

oSel.options[oSel.selectedIndex].value


Yeah, I tried the brackets first, but it was failing in IE, so I
proceded to the following Microsoft pages...
http://msdn.microsoft.com/workshop/a...cts/select.asp
http://msdn.microsoft.com/workshop/a...es/value_3.asp

So I tried it both ways. Thanks for catching that. It still
seems to be a problem.

oSel.name returns the name of the combobox (listbox).
oSel.selectedIndex returns the selected index.

oSel.value seems to return an empty string in IE. I should
have taken all the comments out of the code.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<script language="javascript" type="text/javascript">
/*
* ChangeBGColor(this)
*/
function ChangeBGColor(oSel) {
alert(oSel.value); // FAILS in IE. Empty string (?).
//alert(oSel.name); // WORKS IN IE. Returns name of listbox.
// ^^^^ --- alerts "cbxSelectColor"
return;
}
</script>
</head>
<body>
<p><select size="1" name="cbxSelectColor" tabindex="0"
title="Select A Color" onchange="javascript:ChangeBGColor(this);">
<option>002244</option>
<option>000000</option>
<option>ff0000</option>
<option>00ff00</option>
<option>0000ff</option>
<option>777777</option>
<option>003366</option>
<option>004488</option>
<option>0055AA</option>
</select></p>
</body>
</html>
--
Jim Carlock
Post replies to the newsgroup, thanks.
Nov 23 '05 #3

P: n/a

"Jim Carlock" <an*******@127.0.0.1> wrote in message
news:W2***************@tornado.tampabay.rr.com...
"matty" <un**********@gmail.com> wrote:

oSel.value seems to return an empty string in IE. I should
have taken all the comments out of the code.

<option>002244</option>


You have not defined any values in your options.

Tim
Nov 23 '05 #4

P: n/a
how did I miss that :D

Nov 23 '05 #5

P: n/a
"matty" <un**********@gmail.com> wrote:
how did I miss that :D


Bahh! It must've been all the comments in the first message.
They confused me as well.

//WORKS in IE and FF...
alert(oSel.options[oSel.selectedIndex].text);

<g> Thanks. I tried oSel.text and forgot to try the
oSel.options[oSel.selectedIndex].text. That works.

--
Jim Carlock
Post replies to the newsgroup, thanks.
Nov 23 '05 #6

P: n/a
Jim Carlock wrote:
"matty" <un**********@gmail.com> wrote:
how did I miss that :D

Bahh! It must've been all the comments in the first message.
They confused me as well.

//WORKS in IE and FF...
alert(oSel.options[oSel.selectedIndex].text);


According to the HTML 4 specification, the value of an option is the
content of its value attribute, if there is one, and if not, the
option's content (i.e. the text). So:

alert(oSel.options[oSel.selectedIndex].value);

Should work in your case ... but IE doesn't follow the spec.
[...]

--
Rob
Nov 23 '05 #7

P: n/a
Jim Carlock wrote:
Does a SELECT element (listbox) need to be inside
a FORM element?

The code I'm playing with:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<script language="javascript" type="text/javascript">
/*
* ChangeBGColor(this)
*/
function ChangeBGColor(oSel) {
// FAILING IN IE...
//document.body.style.backgroundColor="#"+oSel.value ;
//
// alert(document.bgColor); // <--- WORKS IN IE and FF
// alert(oSel.value); // <-- FAILING IN IE
// FAILING IN IE...
// alert("oSel.options(oSel.selectedIndex).value = #" + oSel.options(oSel.selectedIndex).value);
if (document.bgColor) {
That should probably be:

var docBody = document.body || document.documentElement;
if (docBody && docBody.bgColor){
...

// FAILS in IE...
document.bgColor="#" + oSel.options(oSel.selectedIndex).value;
docBody.bgColor = '#' ...

But why not include the '#' in the option value/text? Then you can also
have any valid CSS value in the option:

<option value="rgb(0,0,255)">Blue;
<option value="#f00">Red;
...

//alert(oSel.selectedIndex); // WORKS in IE. Returns index.
}
else {
//unsupported browser
alert("Your browser fails to fully support javascript.");
Whether a browser supports a particular DOM interface is no indication
of the extent of its support for JavaScript. The message might be
better as:

...( "Oops, no support for DOM Interface HTMLBodyElement");

}
//alert(oSel.value); // FAILS in IE. Empty string (?).
//alert(oSel.name); // WORKS IN IE. Returns name of listbox.
return;
}
</script>
</head>
<body>
<p><select size="1" name="cbxSelectColor" tabindex="0"
title="Select A Color" onchange="javascript:ChangeBGColor(this);">


There is no need for "javascript:" as part of the content of an onchange
attribute.

[...]
--
Rob
Nov 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.