Jump to content

Multiple Option List Selection


ameliabob
 Share

Recommended Posts

If I have two option lists how do I select the value of the second list ?

function displayResult(){var x=document.getElementById("mySelect").selectedIndex;alert(document.getElementsByTagName("option")[x].value);var y = document.getElementById("myVeggies").selectedIndex;/* Question goes herewhat is the alert to show which veggie I pickedDo I use something different than 'option'*/ }</script></head><body><form>Select your favorite fruit:<select id="mySelect">  <option value="apple">Apple</option>  <option value="orange">Orange</option>  <option value="pineapple">Pineapple</option>  <option value="banana">Banana</option></select>Select your favorite vegetable:<select id="myVeggies">  <option value="potato">Potato</option>  <option value="carrot">Carrot</option>  <option value="leek">Leek</option></select></form>

  • Like 1
Link to comment
Share on other sites

Try this -- <script....blah blah blahalert("You chose "+document.myForm.veggies.value); </script<body<form name="myForm" action="nothing.html" method=POST><select name="veggies"><option value="onions">Onions</option><option value="peas">Peas</option></select></form></body> **NOTE** Notice I didn't include lima beans because NOBODY would choose lima beans! hahaahaha

Edited by ffej2ffej
Link to comment
Share on other sites

I filled it out as such:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><script language="JavaScript" type="text/javascript">function Picked(){                 alert("You chose "+document.myForm.veggies.value);}</script type="text/javascript" ><body<form name="myForm" action="nothing.html" method=POST><select name="veggies"><option value="onions">Onions</option><option value="peas">Peas</option></select><button type="button" onclick="Picked()">pick</button></form></body>

and I get a nasty answer that document.myForm.veggies is null or not an object. No matter whether or not I selected Lima Beans ?????

Link to comment
Share on other sites

y=document.getElementById('myVeggies');/*Alert*/alert('You choose: '+y.options[y.selectedIndex].value);

EDIT:Make sure you change the <select> tag 'name' attribute, back to 'id' attribute, just like it was in your first post.EX:

<select id="veggies">

Edited by eTianbun
Link to comment
Share on other sites

The better answer is to use getElementById and the options property. Using the old dot notation should not be relied upon. Something like this:

var fruits = document.getElementById('mySelect'); //get a reference to the fruit selectvar veggies = document.getElementById('myVeggies'); //get a reference to the veggie select var x = fruits.selectedIndex; //get the selected index of the fruits selectalert(fruits.options[x].value); //alert the value of the selected option var y = veggies.selectedIndex; //get the selected index of the veggies selectalert(veggies.options[y].value); //alert the value of the selected option

EDIT: I must be sleeping. This is the second time I've misread a post. It appears eTianbun actually suggested this solution. Sorry eTianbun!

Edited by ShadowMage
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...