ameliabob 3 Posted April 17, 2012 Report Share Posted April 17, 2012 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> 1 Quote Link to post Share on other sites
ffej2ffej 1 Posted April 17, 2012 Report Share Posted April 17, 2012 (edited) 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 April 17, 2012 by ffej2ffej Quote Link to post Share on other sites
ameliabob 3 Posted April 19, 2012 Author Report Share Posted April 19, 2012 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 ????? Quote Link to post Share on other sites
eTianbun 51 Posted April 20, 2012 Report Share Posted April 20, 2012 (edited) 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 April 20, 2012 by eTianbun Quote Link to post Share on other sites
ameliabob 3 Posted April 20, 2012 Author Report Share Posted April 20, 2012 Thanks for the answer. This completelty solved my problem of having multiple lists on one form Quote Link to post Share on other sites
ShadowMage 94 Posted April 20, 2012 Report Share Posted April 20, 2012 (edited) 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 April 20, 2012 by ShadowMage 1 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.