469,336 Members | 5,570 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,336 developers. It's quick & easy.

using elements

Can someone please explain why the following code breaks
when there is a single drop-down list, otherwise works fine
with multiple drop-down lists?

Many thanks

function xyz() {

var f=document.forms[0];
for(var i=0; i < f.elements["mystuff"].length; i++)
{
var sel=f.elements["mystuff"][i].options.selectedIndex;
var seltxt = f.elements["mystuff"][i].options[sel].text
alert("seltxt");

}
}

Sep 1 '05 #1
2 1212
so***********@yahoo.com wrote:
Can someone please explain why the following code breaks
when there is a single drop-down list, otherwise works fine
with multiple drop-down lists?

Many thanks
Surprising it works at all! :-)

function xyz() {

var f=document.forms[0];
You can cut down on look-ups by storing a reference to the select rather
than the form:

var selEl = document.forms[0].elements["mystuff"];

Also declare seltxt here, initialising it every iteration of the loop is
not necessary and may cause problems in some circumstances. I'll also
add one called 'opt' to store the option we're looking at:

var opt, seltxt;
for(var i=0; i < f.elements["mystuff"].length; i++)
Getting the length only once saves some time (but likely not enough that
you'll notice, but hey...)

for ( var i=0, len=selEl.length; i<len; i++)
{
var sel=f.elements["mystuff"][i].options.selectedIndex;
Presumably you are looping through the options to see which ones are
selected. For a single select, you can just use (without a loop):

var seltxt = selEl[ selEl.selectedIndex ].text;

For a multiple, you want to test if the option is selected first, then
do something with it. You also want to see the value of the variable
seltxt, not just print the string 'seltxt' as you've done:

opt = selEl.options[i];
if ( opt.selected ) {
seltxt = opt.text;
alert( seltxt);
}

}
}


Note that there are likely better ways of getting a reference to your
form and select element, this is just an example.

Here's the full thing, it works for multiples and singles:

<script type="text/javascript">

function xyz() {
var selEl = document.forms[0].elements["mystuff"];
var opt, seltxt;

for ( var i=0, len=selEl.length; i<len; i++) {
opt = selEl.options[i];
if ( opt.selected ) {
seltxt = opt.text;
alert( seltxt);
}
}
}

</script>

<form action="">
<select id="mystuff" multiple>
<option>opt 1
<option>opt 2
<option>opt 3
</select>
<input type="button" value="show" onclick="xyz();">
</form>
--
Rob
Sep 1 '05 #2
RobG wrote:
[...]
Presumably you are looping through the options to see which ones are
selected. For a single select, you can just use (without a loop):

var seltxt = selEl[ selEl.selectedIndex ].text;


Ooops, the preferred method is:

var seltxt = selEl.options[ selEl.selectedIndex ].text;

[...]
--
Rob
Sep 1 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Fred | last post: by
13 posts views Thread by Stumped and Confused | last post: by
6 posts views Thread by t.nicolson | last post: by
5 posts views Thread by Garmt de Vries | last post: by
4 posts views Thread by Nathan Sokalski | last post: by
5 posts views Thread by chaching | last post: by
4 posts views Thread by Yan | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Marylou17 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.