ameliabob Posted April 17, 2012 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> Link to comment Share on other sites More sharing options...
ffej2ffej Posted April 17, 2012 Share Posted April 17, 2012 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 Link to comment Share on other sites More sharing options...
ameliabob Posted April 19, 2012 Author 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 ????? Link to comment Share on other sites More sharing options...
eTianbun Posted April 20, 2012 Share Posted April 20, 2012 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"> Link to comment Share on other sites More sharing options...
ameliabob Posted April 20, 2012 Author Share Posted April 20, 2012 Thanks for the answer. This completelty solved my problem of having multiple lists on one form Link to comment Share on other sites More sharing options...
ShadowMage Posted April 20, 2012 Share Posted April 20, 2012 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.