Jump to content

How do I display selections from multiple dropdown menus


stevemessenger
 Share

Recommended Posts

I am new to Javascript so please be patient.

Here I have two dropdown lists each with an alert to display the list selection. My code is a duplicated adaptation of a w3schools example.Both alert messages show selections from the "keyName" list because (I assume) both alert messages use getElementsByTagName("option").if I put the variables keyN and keyT alone in the alert functions they display the expected selection index numbers.

Is there a way to link 'option' to 'select id' that forces the correct list to be read? Or perhaps another way to approach the task?Thanks in advance for any advice.codeblock<!DOCTYPE html><html><body>//List#1<select id="keyName"><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>//List#2<select id="keyType"><option value="major">major</option><option value="minor">minor</option></select><button type="button" onclick="getKey()">Get Key</button> //displays C/D/E/F<button type="button" onclick="getType()">Get Type</button> //displays C/D<script>function getKey() { var keyN = document.getElementById("keyName").selectedIndex; alert(document.getElementsByTagName("option")[keyN].value);}function getType() { var keyT = document.getElementById("keyType").selectedIndex; alert(document.getElementsByTagName("option")[keyT].value);}</script></body></html>/codeblock

Link to comment
Share on other sites

The individual option lists are separately accessible.

 

Try these for your functions

function getKey() {    var keyN = document.getElementById("keyName");    alert(keyN[keyN.selectedIndex].value);}function getType() {    var keyT = document.getElementById("keyType");    alert(keyT[keyT.selectedIndex].value);}
Edited by johncc
Link to comment
Share on other sites

I assume there is a typo. My KeyT is indeed a select input with id="keyType">"

 

document.getElementsByTagName("option") returns an alphabetically sorted (by value) collection of all (6) of the objects of type option on the page. ie C, D, E, F, major, minor. Your values of KeyT and KeyN will index into that collection. Since your KeyT can only have values of 0 or 1, it will always return either C or D not the expected minor or major. Maybe I can make it clearer by including an extra line in my getType.

function getType() {    var keyT = document.getElementById("keyType");  // the select object    var tIndex = keyT.selectedIndex;                // the index of the selected option    alert(keyT[tIndex].value);                      // the value of the selected option}
Edited by johncc
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...