Values of Dropdown Boxes

J

John Ciccone

How in the world do I get the value of a dropdown list box? If the list
options are:

Apple
Orange
Banana

and I select Orange, what is the value? e.g. I have a

function sendform()
{
with (document.form1)
if (DropList.value = "Apple")
{
Field1.value = "It's an apple"
}
else if (DropList.value = "Orange")
{
Field1.value = "It's an orange"
}
else
{
Field1.value = "It's banana"
}
}

When I try the above, no matter what I select, all it does is make the drop
down list box "Apple", and "It's an apple" is inserted into the field.

I've tried assuming each item in the list is a number, but that doesn't work
either.

By the way, I'm cutting/pasting from a sample form that does work. I don't
see any "End if". Is that not necessary in HTML?
 
J

Jon Spivey

Hi John,

Dropdowns don't have a value property. They give a zero based (1st =0, 2nd
=1) index identifying the choice selected. The property is called
selectedIndex, eg
dropdown.options.selectedIndex
or
this.options.selectedIndex
once we know this we can determine the value property of that index. So
putting the 2 together we have

<select onchange="alert('You Chose ' +
this.options[this.options.selectedIndex].value);">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</select>

You coudl also do the same thing with a function call

function getValue(f){
alert('You Chose ' + f.options[f.options.selectedIndex].value);
}
<select onchange="getValue(this);">


Cheers,
Jon
 
J

John Ciccone

Wow. Thanks, Jon. That's a lot of info. Can't wait to try it out.

Very best,
John
 
R

Ronny K.S. Wong Fat

Try this one,
<title>Ronny K.S. Wong Fat</title>

<body>
<form name="AutoListBox">
<p><select name="ListBoxURL" size="1" language="javascript"
onchange="gotoLink(this.form);">
<option value="URL#1.htm">Place 1 </option>
<option value="URL #2.htm">Place 2 </option>
<option value="URL#3.htm">Place 3 </option>
<option selected> -- Select to Jump -- </option>
</select></p>

<script language="JavaScript">
<!--
function gotoLink(form) {
var OptionIndex=form.ListBoxURL.selectedIndex;
parent.location = form.ListBoxURL.options[OptionIndex].value;}
//-->
</script>

</form>



</body>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top