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

using elements

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.