Jump to content

Multiple Option List Selection


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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...